I'm building a tracking application that use Google Maps and as a result has multiple markers the user can click on. The page will eventually refresh every 15 minutes or so to keep up with the latest tracking data. However I want to give the the user to stick with the selected marker even after a page refresh so if needs be they can follow the selected vehicle (which the marker represents).
I've tried to achieve this using the local storage. I can get the lat and long into the storage no problem but when I come to get it out I've found that the longitude has come out with too many decimal places so the API won't recognise the position.
To go to the marker after the refresh my code is like this:
var centre = {lat: 53.806590, lng: -1.548437};
var centreRefresh = localStorage.getItem("markerPos");
// Draw the map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: centre
});
if (centreRefresh != null && $("#zoomRefresh").is(':checked')) {
map.setZoom(8);
map.setCenter(centreRefresh);
}
And to fill the local storage I have this:
// Add Info Window to Marker
marker.addListener('click', function() {
infowindow.open(map, marker);
if ($("#zoomRefresh").is(':checked')) {
markerPos = marker.getPosition();
localStorage.setItem("markerPos", markerPos);
}
map.setZoom(8);
map.setCenter(marker.getPosition());
});
The optput in the console from that is set in the local storage is "(55.823772, -2.8525829999999814)" and the error message is InvalidValueError: setCenter: not a LatLng or LatLngLiteral: not an Object Is there a better way to do this as this method doesn't seem to be working correctly?
