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, stackoverflow.com/questions/2265055/… and, stackoverflow.com/questions/6048975/… — Mr. J
– Mr. J, Commented Oct 20, 2016 at 7:08

Martin Pham · Accepted Answer · 2016-10-23 08:39:03Z

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>

geocodezip · Accepted Answer · 2016-10-14 13:39:19Z

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, 2016 at 13:39

geocodezip

162k14 gold badges228 silver badges256 bronze badges

1 Comment

geocodezip Over a year ago

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.

Collectives™ on Stack Overflow

Custom zoom level on Google Maps

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related