81

Here is the code I have written to add a marker to the google map by providing latitude and longitude. The problem is that I get a very highly zoomed google map. I have tried setting the zoom level to 1 but this has no effect to the very highly zoomed map.

 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script> <script type="text/javascript"> var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",new google.maps.Size(32, 32), new google.maps.Point(0, 0),new google.maps.Point(16, 32)); var center = null; var map = null; var currentPopup; var bounds = new google.maps.LatLngBounds(); function addMarker(lat, lng, info) { var pt = new google.maps.LatLng(lat, lng); bounds.extend(pt); var marker = new google.maps.Marker({ position: pt, icon: icon, map: map }); var popup = new google.maps.InfoWindow({ content: info, maxWidth: 300 }); google.maps.event.addListener(marker, "click", function() { if (currentPopup != null) { currentPopup.close(); currentPopup = null; } popup.open(map, marker); currentPopup = popup; }); google.maps.event.addListener(popup, "closeclick", function() { map.panTo(center); currentPopup = null; }); } function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(0, 0), zoom: 1, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR }, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL } }); addMarker(27.703402,85.311668,'New Road'); center = bounds.getCenter(); map.fitBounds(bounds); } </script> </head> <body onload="initMap()" style="margin:0px; border:0px; padding:0px;"> <div id="map"></div> </body> </html>

How can i decrease the level of zoom for this case?

Improve this question

6 Answers 6

Reset to default
129

Your code below is zooming the map to fit the specified bounds:

addMarker(27.703402,85.311668,'New Road'); center = bounds.getCenter(); map.fitBounds(bounds);

If you only have 1 marker and add it to the bounds, that results in the closest zoom possible:

function addMarker(lat, lng, info) { var pt = new google.maps.LatLng(lat, lng); bounds.extend(pt); }

If you keep track of the number of markers you have "added" to the map (or extended the bounds with), you can only call fitBounds if that number is greater than one. I usually push the markers into an array (for later use) and test the length of that array.

If you will only ever have one marker, don't use fitBounds. Call setCenter, setZoom with the marker position and your desired zoom level.

function addMarker(lat, lng, info) { var pt = new google.maps.LatLng(lat, lng); map.setCenter(pt); map.setZoom(your desired zoom); } 

html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; }
<html> <head> <script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" type="text/javascript"></script> <script type="text/javascript"> var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png", new google.maps.Size(32, 32), new google.maps.Point(0, 0), new google.maps.Point(16, 32)); var center = null; var map = null; var currentPopup; var bounds = new google.maps.LatLngBounds(); function addMarker(lat, lng, info) { var pt = new google.maps.LatLng(lat, lng); map.setCenter(pt); map.setZoom(5); var marker = new google.maps.Marker({ position: pt, icon: icon, map: map }); var popup = new google.maps.InfoWindow({ content: info, maxWidth: 300 }); google.maps.event.addListener(marker, "click", function() { if (currentPopup != null) { currentPopup.close(); currentPopup = null; } popup.open(map, marker); currentPopup = popup; }); google.maps.event.addListener(popup, "closeclick", function() { map.panTo(center); currentPopup = null; }); } function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(0, 0), zoom: 1, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR }, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL } }); addMarker(27.703402, 85.311668, 'New Road'); // center = bounds.getCenter(); // map.fitBounds(bounds); } </script> </head> <body onload="initMap()" style="margin:0px; border:0px; padding:0px;"> <div id="map"></div> </body> </html>

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

Comments

31

map.setZoom(zoom:number)

https://developers.google.com/maps/documentation/javascript/reference#Map

Improve this answer

Comments

26

What you're looking for are the scales for each zoom level. The numbers are in metres. Use these:

20 : 1128.497220

19 : 2256.994440

18 : 4513.988880

17 : 9027.977761

16 : 18055.955520

15 : 36111.911040

14 : 72223.822090

13 : 144447.644200

12 : 288895.288400

11 : 577790.576700

10 : 1155581.153000

9 : 2311162.307000

8 : 4622324.614000

7 : 9244649.227000

6 : 18489298.450000

5 : 36978596.910000

4 : 73957193.820000

3 : 147914387.600000

2 : 295828775.300000

1 : 591657550.500000

Improve this answer

3 Comments

What is zoom level? For instance, for 20 will it show 1128.497220 m of a street for 1 m of a display?
@CoolMind I was trying to understand this as well and it looks like it depends on the PPI of your screen. Open street map provides scale, which differs from Google scale, but it gives more information about scaling process. e.g 0.298m * 1080 pixels (wide) gives approximately 322 m across the screen (in portrait mode) I haven't tested this, but it looks like it is a good starting point to get the zoom adjustment based on the device screen. wiki.openstreetmap.org/wiki/Zoom_levels
Thanks! Your answer helped me to understand that decreasing a zoom level by 1 multiplies a distance by 2 on a screen. I used this fact in later development. I needed to change zoom level when changing circle radius (for instance, 5, 10, 20, 100 km). In order to get appropriate zoom level for chosen distance on a screen (Android device) I had to write this solution: stackoverflow.com/a/56464293/2914140 in Kotlin.
19

For zooming in your map two levels, add this small line of code,

map.setZoom(map.getZoom() + 2);
Improve this answer

Comments

6

Here is a function I use:

var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(52.2, 5), mapTypeId: google.maps.MapTypeId.ROADMAP, zoom: 7 }); function zoomTo(level) { google.maps.event.addListener(map, 'zoom_changed', function () { zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function (event) { if (this.getZoom() > level && this.initialZoom == true) { this.setZoom(level); this.initialZoom = false; } google.maps.event.removeListener(zoomChangeBoundsListener); }); }); }
Improve this answer

Comments

2

These methods worked for me, it maybe useful for anyone: MapOptions interface

set min zoom: mMap.setMinZoomPreference(N);

set max zoom: mMap.setMaxZoomPreference(N);

where N can equal to:

20 : 1128.497220

19 : 2256.994440

18 : 4513.988880

17 : 9027.977761

16 : 18055.955520

15 : 36111.911040

14 : 72223.822090

13 : 144447.644200

12 : 288895.288400

11 : 577790.576700

10 : 1155581.153000

9 : 2311162.307000

8 : 4622324.614000

7 : 9244649.227000

6 : 18489298.450000

5 : 36978596.910000

4 : 73957193.820000

3 : 147914387.600000

2 : 295828775.300000

1 : 591657550.500000

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.