Custom zoom level on Google Maps

Question

I have a simple map with zoom level 4 at this point. Zoom level 5 is too big for me. Ideally, I'd like 4.6 zoom level which is possible in iOS SDK for Google maps.

Is there a way on how I can set the zoom level to 4.6? I want the map to occupy full page, so cannot really put in a div and use that part of it.

The objective is to show full USA in the center.

<!DOCTYPE html>
<html>
<head>
    <meta content="initial-scale=1.0, user-scalable=no" name="viewport">
    <meta charset="utf-8">
    <title>Map example</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>

      var layer;
       var layer1;
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: {lat: 39.8282, lng: -98.5795}
        });


      }
    </script> 
    <script async defer src=
    "https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
    </script>
</body>
</html>

see this links, http://stackoverflow.com/questions/2265055/how-to-get-google-maps-api-to-set-the-correct-zoom-level-for-a-country and, http://stackoverflow.com/questions/6048975/google-maps-v3-how-to-calculate-the-zoom-level-for-a-given-bounds — Mr. J, Oct 20 '16 at 07:08

score 7 · Accepted Answer · answered Oct 23 '16 at 08:39

You can use CSS zoom to make your map fits your need. For example, set Google map zoom to 4, then set #map zoom to 1.15 (because you want Google map zoom to 4.6 = 1.15 * 4)

<html>
<head>
    <meta content="initial-scale=1.0, user-scalable=no" name="viewport">
    <meta charset="utf-8">
    <title>Map example</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        zoom: 1.15;
      }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: 39.8282, lng: -98.5795}
        });


      }
    </script> 
    <script async defer src=
    "https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
    </script>
</body>
</html>

score 2 · Answer 2 · answered Oct 14 '16 at 13:39

2

Zoom levels on Google Maps are integers. Full stop. Your only option is to change the size of the div that contains the google.maps.Map object.

answered Oct 14 '16 at 13:39

geocodezip

158,664
13
220
245

1

You are using a percent size for your map currently, that won't work with this option. The specific settings will depend on the size of the display. – geocodezip Oct 14 '16 at 13:57

Custom zoom level on Google Maps

2 Answers2

Linked