google maps api v3 auto center auto zoom

Question

This is based on the Google Maps API v3. The page refreshes every 10 seconds and updates the marker positions on the map with auto centre and auto zoom. The following are the issues that I face:

Every time the page loads(every 10 seconds) map is centered to (47.6145, -122.3418) initially and then centers and zoom based on the markers positions. If uncomment the following the map doesn't load at all:

center: new google.maps.LatLng(47.6145, -122.3418),

How can I stop the map loading initial lat and long coordinates (47.6145, -122.3418) every time the map refreshes.

2. Is there a way to control the zoom levels?

Here is the code based on the google maps api v3

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(47.6145, -122.3418),
    zoom: 14,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;

  downloadUrl("phpsqlajax_genxml2.php", function(data) {

    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    var bounds  = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      var UID = markers[i].getAttribute("UID");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("latitude")),
          parseFloat(markers[i].getAttribute("longitude")));
      var html = "<b>" + UID + "</b> <br/>";
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
    bounds.extend(point);
      bindInfoWindow(marker, map, infoWindow, html);
    }
   map.fitBounds(bounds);
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}


  setInterval(load, 10000); 

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

Geek Num 88 Geek Num 88 · Accepted Answer · 2013-02-13T07:11:27

Firstly to control the zoom level there is a method called setZoom() that you can call on the maps object, in your example the map variable.

map.setZoom(5);

but more to your other problem of the map refreshing. I'm assuming that the whole webpage is refreshing to update the content of the map - I think you should investigate ajax calls to refresh the data in the map without refreshing the whole page

You already have the base by using the downloadUrl() method - now just put that on a setInterval() and let the data refresh every 30 seconds to 1 minute.

I would also suggest that you clear the map of the markers before you add new ones otherwise you will have a memory leak creating duplicate DOM elements everytime the data refreshes. I usually put my marker references in an array and then loop through the array and run marker.setMap(null) which will remove the marker from the map.

EDIT with code snippet

using your code snippet above lets try and make this work by seperating the code into separate functions a load function and a refresh function, also make sure you move map and infoWindow into the global scope.

var map;
var infoWindow;
function load() {
    map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(47.6145, -122.3418),
    zoom: 14,
    mapTypeId: 'roadmap'
    });
    infoWindow = new google.maps.InfoWindow;
    refresh();
}
function refresh(){

    downloadUrl("phpsqlajax_genxml2.php", function(data) {

    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    var bounds  = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      var UID = markers[i].getAttribute("UID");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("latitude")),
          parseFloat(markers[i].getAttribute("longitude")));
      var html = "<b>" + UID + "</b> <br/>";
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
    bounds.extend(point);
      bindInfoWindow(marker, map, infoWindow, html);
    }
   map.fitBounds(bounds);
  });
}
setInterval("refresh()",60000);

google maps api v3 auto center auto zoom

1 Answers