1

I am using a google map in a PHP/MYSQL application. I get the code for the map form Goolge Docs and adapted a bit for the application. New modifications are comming in the application and now the application need to know the 'current zoom level of the google map'. I check in internet but I didn't find a clear answer. Is it possible to do it ? Is it mandatory to reload the page in every zoom change ? This is the code and thanks. 

 <code> function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(latitude,longitude), zoom: zoommapa, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE }, mapTypeId: 'roadmap' }); // drap center var image = 'images/icons/etapa/etapa.png'; var myLatLng = new google.maps.LatLng(latitude,longitude); var beachMarker = new google.maps.Marker({ position: myLatLng, map: map, icon: image }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("marquers_motor_3.php", function(data) { var xml = data.responseXML; var markers = xml.documentElement.getElementsByTagName("marker"); //var name = 1; var markers2 = []; for (var i = 0; i < markers.length; i++) { //var name = markers[i].getAttribute("name"); var image = markers[i].getAttribute("image"); var sombra = markers[i].getAttribute("sombra"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var orden = markers[i].getAttribute("order"); var name = markers[i].getAttribute("name"); // web_site email ciudad pais var web_site = markers[i].getAttribute("web_site"); var email = markers[i].getAttribute("email"); var ciudad = markers[i].getAttribute("ciudad"); var pais = markers[i].getAttribute("pais"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); if (ciudad =="" || ciudad =='Desconocido') { ciudad = ""} else {ciudad =ciudad + " " } if (!(web_site =="")) {web_site = "<a href='" + web_site + "' class='list' target='_blank'>" + web_site +"</a>"+"<br>"} else {web_site =""} var html = "<div id='infoWindow'>" + orden + " - " + name + "<br>" + web_site + ciudad + " " + pais + "</div>"; //var name = name + 1; var icon = customIcons[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: image, shadow: sombra }); var marker2 = new google.maps.Marker({ position: point }); markers2.push(marker); bindInfoWindow(marker, map, infoWindow, html); } }); var mcOptions = {gridSize: 50, maxZoom: 15}; var MarkerClusterer = new MarkerClusterer(map, markers2,mcOptions); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } 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); } function doNothing() {} //]]> //google.maps.event.addDomListener(window, 'load', initialize);

Improve this question
3
  • you can use this code map.getZoom();. For more details, you check the SO URL: link Commented Dec 13, 2013 at 7:34
  • Could you please give more details ? Commented Dec 13, 2013 at 8:35
  • From your code, you can use map.getZoom(); to get current zoom level. Please check link attached in my first comment. Commented Dec 13, 2013 at 9:35

2 Answers 2

Reset to default
1

I assume the application needs to know the zoom level, but the zoom level is in user space (client side).

  1. get the zoom level from the map with javascript (see https://developers.google.com/maps/documentation/javascript/reference?hl=nl#Map)

    map.getZoom();

  2. This has to be send back to the server using AJAX calls

  3. Server can do with the zoom level what it wants

Keep in mind the fact that if multiple users can open the same map, zoom levels can be different so what would be the required behavior?

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks ! Point 3, a different MYSQL request will be sent to the user's browser. Several users can use the same map, at different zoom levels,no?
User can use the same map at different zoom levels for sure, but it all depends on what you might want to server wise with the zoom level (i.e. store it in the database as "the" default zoom level could go horribly wrong)
No, It is not the target. The goal is : the MYSQL req will be different depending on the zoom level. A behaviour like markercluster.
1

Yes, you can get the current zoom level of the map with the getZoom method of the google.maps.Map object.

If you need to trigger a method when the zoom changed then you can listen to the zoom_changed event of the google.maps.Map object. For further information about google.maps.Map object read: this

Consider the following example (to make it work: copy in notepad save the file as html and run it with Chrome):

<!DOCTYPE html> <html> <head> <title>Getting Zoom Demo</title> <style type="text/css"> html, body{ height: 100%; height: 100%; margin: 0; padding: 0; } #map-container{ height: 100%; width: 100%; min-width:500px; min-height:300px; } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> </head> <body> <div> <label id="display-zoom-label"> </label> </div> <div id="map-container"></div> <script> // Global map variable to have access to map object everywhere in the code var map, firstBoundChangedListener, markers = []; // Add random markers function addMarkers(count) { // map is the google.maps.Map object var bounds = map.getBounds(); var northEast = bounds.getNorthEast(); var southWest = bounds.getSouthWest(); var minLat = Math.min(northEast.lat(), southWest.lat()); var maxLat = Math.max(northEast.lat(), southWest.lat()); var minLng = Math.min(northEast.lng(), southWest.lng()); var maxLng = Math.max(northEast.lng(), southWest.lng()); var latDifference = maxLat - minLat; var lngDifference = maxLng - minLng; var latLngArray = new Array(); for (var i = 0; i < count; i++) { var lat = minLat + Math.random() * latDifference; var lng = minLng + Math.random() * lngDifference; var latLng = new google.maps.LatLng(lat, lng); latLngArray.push(latLng); } for (var i = 0; i < latLngArray.length; i++) { var marker = new google.maps.Marker({ position: latLngArray[i], title: "Marker: " + i }); markers.push(marker); marker.setMap(map); } } function UpdateZoomLabel() { var displayZoomLabel = document.getElementById("display-zoom-label"), // get current zoom zoomValue = map.getZoom(); displayZoomLabel.innerHTML = "The Current Map's Zoom is: " + zoomValue; } // Initialize the map object function initialize() { var latlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = { zoom: 8, center: latlng }; map = new google.maps.Map(document.getElementById('map-container'), mapOptions); firstBoundChangedListener = google.maps.event.addListener(map, "bounds_changed", function () { if (firstBoundChangedListener) google.maps.event.removeListener(firstBoundChangedListener); // call add markers: add 'n' markers randomly addMarkers(6); }); //Listen for the 'zoom_changed' event of the map google.maps.event.addListener(map, "zoom_changed", function () { //show zoom in label UpdateZoomLabel(); }); UpdateZoomLabel(); } google.maps.event.addDomListener(window, 'load', initialize); </script> </body> </html>
Improve this answer

Comments