Google Maps API - Zoom Level

From NoskeWiki
Jump to navigation Jump to search

About

NOTE: This page is a daughter page of: Google Maps API


Google Maps has a "zoom" level that ranges from:

  • 0 (whole map) to:
  • ~20 (individual building).

In the Google Maps API you can set it with: Map.setZoom(zoom). As a pro tip, you can also see the zoom level in Google Maps itself if you have nothing places selected and look for the ",**z" at the end of the URL, as per this screenshot:

Where you can see zoom level.


Zoom Display HTML

Warning: I've been unable to test this code because Googe's new API key lockdown. You'd really think they would have a special API key for testing that allows a few hits per day from a single IP... but nope... you gotta pay for it now I think... (watch this video).


google_maps_zoom.html 

<html>
<head>
  <title>Google Maps Zoom - Untested</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
  #map-canvas {
    width: 500px;
    height: 400px;
    float: left;
  }
  #info-panel {
    float: left;
    margin-left: 10px;
  }
  </style>

  </head>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
<body>
  <div id="map-canvas"></div>
  <div id="info-panel">
    <b>Zoom level:</b>
    <div id="zoom-level"></div>
  </div>

    <script>

    /*
     * Sets up Google map into 'map-canvas' div and zoom listener.
     */
    function initialize() {
      let map = new google.maps.Map(document.getElementById('map-canvas'), {
          zoom: 15,
          center: google.maps.LatLng(37.2434151284, -122.031447712),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      google.maps.event.addListener(map, 'zoom_changed', function() {
        zoomLevel = map.getZoom();
        document.getElementById('zoom-level').innerHTML = zoomLevel.toString();
      });
    }

    // Onload handler to fire off the app:
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</body>
</html>


See Also


Links

Retrieved from "http://andrewnoske.com/w/index.php?title=Google_Maps_API_-_Zoom_Level&oldid=5206"