Menu
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?
903
The Zoom control displays "+" and "-" buttons for changing the zoom level of the map. This control appears by default in the bottom right corner of the map.
Or you can right click on the map and set a center address. Zoom Level+Maximum/Minimum Zoom. Google Maps has an integer 'zoom level' which is the resolution of the current view. Zoom levels are between 0 (the entire world can be seen on one map) and 21+.
Users can zoom the map by clicking the zoom controls. They can also zoom and pan by using two-finger movements on the map for touchscreen devices.
To change the map scale units used on the Google Maps desktop website on your Windows 10 PC or Mac, click the scale bar in the bottom-right corner. Selecting the scale bar will switch to the other measurements, allowing you to quickly view the map scale in miles, kilometers, or relevant smaller units.
The default zoom level is set to 0. You can change the zoom level of the map using simple steps. Step 1 Go to Add or Edit Map page . Step 2 Select ‘Default zoom level’ in the ‘Map Information section’. Step 3 click save map and see the changes.
An old trick that used to work was to add a zoom parameter to the end of the URL e.g. &zoom=6 but this trick does not work with the current embed code that Google Maps generates. The trick now is to adjust the zoom on the big map BEFORE opening the share window. So now you see my example embedded map is zoomed in all the way:
When a user scrolls a page that contains a map, the scrolling action can unintentionally cause the map to zoom. The demo below allows the page to scroll normally, without affecting the map. Users can zoom the map by clicking the zoom controls.
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.
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>map.setZoom(zoom:number)
https://developers.google.com/maps/documentation/javascript/reference#Map
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
