Le Qs Le Qs - 1 month ago 7
Javascript Question

Range error when loading coordinates

I have a contact page that fetches the coordinates from localstorage

like this

localStorage.getItem("jc")


I have used eval to convert string to variable

var thecoords = eval(localStorage.getItem("jc"));


and used the coordinates to center on those coordinates like

var center = new google.maps.LatLng(thecoords);
and pan'ed to that location

map.panTo(center);


However i get this error


Uncaught RangeError: Maximum call stack size exceeded


I have checked my coordinates and they are in the right order of
lat,lng


Why could i be getting this error?.

Answer

The google.maps.LatLng constructor takes two Numbers as an argument, not whatever you are passing it:

var center = new google.maps.LatLng(thecoords); // and pan'ed to that location

examples using google.maps.LatLngLiteral objects.

proof of concept fiddle

code snippet: (from jsfiddle, doesn't actually work due to sandboxing)

localStorage.setItem('jc', JSON.stringify({lat: 40.7127837, lng: -74.0059413}));
function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    console.log(localStorage.getItem('jc'));
    console.log()
    var marker = new google.maps.Marker({
      map: map,
      position: JSON.parse(localStorage.getItem('jc'))
    });
    map.panTo(JSON.parse(localStorage.getItem('jc')));
}

google.maps.event.addDomListener(window, "load", initialize);
html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="clear" value="clear store" type="button" onclick="clearLocalStorage()" />
<div id="panel">
            <div id="color-palette"></div>
        </div>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

Comments