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

  • you can use this code `map.getZoom();`. For more details, you check the SO URL: [link](http://stackoverflow.com/questions/6385703/how-to-find-current-zoom-level-in-a-google-map) – Kumar V Dec 13 '13 at 07:34
  • Could you please give more details ? –  Dec 13 '13 at 08:35
  • From your code, you can use `map.getZoom();` to get current zoom level. Please check link attached in my first comment. – Kumar V Dec 13 '13 at 09:35

2 Answers2

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?

Ronald Swets
  • 1,669
  • 10
  • 16
  • 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? –  Dec 13 '13 at 09:29
  • 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) – Ronald Swets Dec 13 '13 at 09:57
  • No, It is not the target. The goal is : the MYSQL req will be different depending on the zoom level. A behaviour like markercluster. –  Dec 14 '13 at 18:45
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>
sabotero
  • 4,265
  • 3
  • 28
  • 43