Google maps api v3 autocenter autocenter

Question

It is based on the Google Maps API v3. The page refreshes every 10 seconds and updates the position of the markers on the map with automatic center and automatic scaling. The following are the issues I am facing:

• Each time a page loads (every 10 seconds), the map has a center (47.6145, -122.3418) initially, and then centers and scales it based on the positions of the markers. If you uncomment the following, the card does not load at all:

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

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

2. Is there a way to control zoom levels?

Here is the code based on google api v3 maps

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); } 

Answer 1

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

 map.setZoom(5); 

but more for your other map update problem. I assume that the entire web page is being updated to update the contents of the map. I think you should investigate ajax calls to update the data on the map without refreshing the entire page.

You already have the database using the downloadUrl() method - now just put this on setInterval() and let the data be updated every 30 seconds to 1 minute.

I also suggest that you clear the marker map before adding new ones, otherwise you will have a memory leak that creates duplicate DOM elements every time the data is updated. I usually put marker references in an array, and then marker.setMap(null) over the array and run marker.setMap(null) , which removes the marker from the map.

EDIT with code snippet

using the above code snippet, try to do this work by dividing the code into separate functions, the download function and the update function, also make sure that you move map and infoWindow to the global area.

 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);