Best IT Recipes

How to set zoom level on google map

Here is the code I wrote to add a marker to the google map, specifying latitude and longitude. The problem is that I get a very greatly enlarged google map. I tried to set the zoom level to 1, but this does not affect the very greatly enlarged 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 reduce the zoom level for this case?

+42
javascript google-maps google-maps-api-3
Jul 12 2018-12-12T00:
source share
5 answers

Your code below scales the map to fit the specified boundaries:

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

If you have only 1 marker and add it to the frames, this will lead to the closest scaling:

 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 that you have “added” to the map (or expanded the borders), you can only call fitBounds if that number is greater than one. I usually put markers in an array (for later use) and check the length of this array.

If you only have one marker, do not use fitBounds. Call setCenter , setZoom with a marker position and the desired zoom level.

 function addMarker(lat, lng, info) { var pt = new google.maps.LatLng(lat, lng); map.setCenter(pt); map.setZoom(your desired zoom); }
+78
Jul 12 2018-12-12T00:
source share
— -

map.setZoom(zoom:number)

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

+11
Jul 12 2018-12-12T00:
source share

To zoom the map in two levels, just add this small line code map.setZoom(map.getZoom() + 2);

+9
Jul 05 '13 at 13:57 on
source share

What you are looking for are scales for each zoom level. Use them:

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

+6
Aug 15 '15 at 18:36
source share

Here is the function I'm using:

 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); }); }); }
+5
Jul 12 2018-12-12T00:
source share


More articles:


All Articles