0

I have the following JavaScript code that displays the current location of a user in a map every 15 seconds. My problem is that once the browser reaches certain amount of refreshes it stops working. This happens quicker if a mobile browser is being used. I would like to know if there is a way for me to clear the browser's memory so that the application continues to work. Thanks

<!DOCTYPE html> <html> <head> <title>Map</title> <link rel="stylesheet" href="layout.css"/> <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"> </script> <script type="text/javascript"> //Jquery function that waits until the html is fully loaded to then execute pending JavaScript code. $(document).ready(function () { setInterval( function initialize() { navigator.geolocation.getCurrentPosition( function geoPosition(location) { console.log(location); //Assigns coordinates to the variable. var currentLocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude); //Displays the map on the canvas. var mapOptions = { panControl: false, zoomControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false, scrollwheel: false, navigationControl: false, mapTypeControl: false, draggable: false, //center: new google.maps.LatLng(25.753981, -80.375633), center: currentLocation,//Displays the location zoom: 15,//How far or close mapTypeId: google.maps.MapTypeId.TERRAIN//Type of map }; //Objects of this class define a single map on a page. var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); //Identifies user's location and tdisplays pin on a map. var marker = new google.maps.Marker({ position: currentLocation,//Map location displayed //position: new google.maps.LatLng(25.753981, -80.375633), map: map //icon : 'map_icons/person.png'//Set a custom icon }); }) }, 15000); }); </script>
Improve this question
7
  • 1
    init() is just that; it should run once, not in an interval. don't make a new map and call to getCurrentPosition() repeatedly, no wonder it crashes... use the api to update an existing map using watchPosition() events. Commented Jan 28, 2014 at 2:07
  • @dandavis: "no wonder it crashes" --- any details on that? The new map object is created, the old one is to be garbage collected. Where do you see a potential leak here? Commented Jan 28, 2014 at 2:10
  • the map is not just a soft js object that can be dropped; it's a ton of objects many of them with dom bindings, it's a frame reload, a BFcache push, and if it takes longer than 15 seconds all told, it can stack up that workload and slow itself down further until it crashes. once OP switches to using, say the marker API instead of redrawing, app performance will be spectacular and a world apart from the behavior show. Commented Jan 28, 2014 at 2:16
  • @dandavis: after element is removed from the dom - the event handlers should be detached and the js objects - garbage collected. So it's not obvious that this code should leak unless you know the particular google maps api issues. Commented Jan 28, 2014 at 2:26
  • 1
    apologies for assuming otherwise; having used gmaps a lot i know it takes forever to boot sometimes and geolocation itself can take 45 seconds on a cold GPS, putting the app three back in the count before it can even display. i can't dig through closuered code or i'd find the leak(s) for you... Commented Jan 28, 2014 at 3:02

1 Answer 1

Reset to default
1

by taking out the interval and using watchPosition(), we can get a much nicer application that updates faster as needed. By moving to a marker API call instead of reloading a lot of net resources, we save a ton of bandwidth and device power in the case of mobile. If you zoom out, and comment out the map center line, you can even go into "airplane mode" and the marker still moves as you do! It also won't crash now because the calls are all async and cannot get backed up like an interval-based redraw would. You also don't have to wait 15 seconds for it to start up anymore.

i only had to touch those two parts, the rest of the code was just fine:

<!DOCTYPE html> <html> <head> <title>Map</title> <link rel="stylesheet" href="layout.css"/> <!--<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"> </script> <script type="text/javascript"> //Jquery function that waits until the html is fully loaded to then execute pending JavaScript code. $(document).ready(function() { navigator.geolocation.getCurrentPosition( function geoPosition(location) { console.log(location); //Assigns coordinates to the variable. var currentLocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude); //Displays the map on the canvas. var mapOptions = { panControl: false, zoomControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false, scrollwheel: false, navigationControl: false, mapTypeControl: false, draggable: false, //center: new google.maps.LatLng(25.753981, -80.375633), center: currentLocation, //Displays the location zoom: 15, //How far or close mapTypeId: google.maps.MapTypeId.TERRAIN //Type of map }; //Objects of this class define a single map on a page. var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); //Identifies user's location and tdisplays pin on a map. var marker = new google.maps.Marker({ position: currentLocation, //Map location displayed //position: new google.maps.LatLng(25.753981, -80.375633), map: map //icon : 'map_icons/person.png'//Set a custom icon }); // update the marker and recenter when/if the user moves: navigator.geolocation.watchPosition(function(geo) { var currentLocation = new google.maps.LatLng(geo.coords.latitude, geo.coords.longitude); marker.setPosition(currentLocation); map.setCenter(currentLocation); }); }); }); </script> <div id=map-canvas style='height:35em;'></div> </html>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I had tried using watchPosition before but for some reason it was overwhelming the browser and causing it to crash even quicker. I have tested the changes you provided and it works like a charm. I will review in detail to see what I did wrong.Thanks

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.