设置Google Maps API V3根据屏幕/设备宽度缩放级别

Question

I have the following code which display 3 markers on a google map. On screen widths larger than 600px the zoom level is set to '13', which is fine. Ideally, once the screen/device width is lower than 600px I would like the zoom level to drop to '12'.

I have tried using fitBounds() , and looked at LatLngBounds , but I'm struggling to get those to work with my code. Is this simple to achieve? Any help would be grately appreciated.

My code is below:

 var map; var locations = [ ['Location 1', 53.560410,-2.105351, 2], ['Location 2', 53.532154, -2.165793, 1], ['Location 3', 53.5386671,-2.1681325, 3] ]; function bindInfoWindow(marker, map, infowindow, strDescription) { google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(strDescription); infowindow.open(map, marker); }); } function setMarkers(map, locations) { var infowindow = new google.maps.InfoWindow({ content: "" }); var i, location, myLatLng, marker; for (i = 0; i < locations.length; i++) { location = locations[i]; myLatLng = new google.maps.LatLng(location[1], location[2]); marker = new google.maps.Marker({ position: myLatLng, map: map, title: location[0], zIndex: location[3] }); bindInfoWindow(marker, map, infowindow, location[0]); } } function initialize() { var mapOptions = { zoom: 13, center: new google.maps.LatLng(53.545701, -2.131714), panControl: false, disableDefaultUI: true, zoomControl: true, scrollwheel: false, panControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); setMarkers(map, locations); } google.maps.event.addDomListener(window, 'load', initialize); google.maps.event.addDomListener(window, 'resize', initialize); window.onpopstate = initialize(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <div id="map-canvas" style="height:400px; width:100%;"></div> 

Answer 1

To use fitBounds:

1. create a google.maps.LatLngBounds object
2. add all the markers positions to it
3. call map.fitBounds

code snippet:

 var map; var bounds = new google.maps.LatLngBounds(); var locations = [ ['Location 1', 53.560410,-2.105351, 2], ['Location 2', 53.532154, -2.165793, 1], ['Location 3', 53.5386671,-2.1681325, 3] ]; function bindInfoWindow(marker, map, infowindow, strDescription) { google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(strDescription); infowindow.open(map, marker); }); } function setMarkers(map, locations) { var infowindow = new google.maps.InfoWindow({ content: "" }); var i, location, myLatLng, marker; for (i = 0; i < locations.length; i++) { location = locations[i]; myLatLng = new google.maps.LatLng(location[1], location[2]); marker = new google.maps.Marker({ position: myLatLng, map: map, title: location[0], zIndex: location[3] }); bounds.extend(marker.getPosition()); bindInfoWindow(marker, map, infowindow, location[0]); } } function initialize() { var mapOptions = { zoom: 13, center: new google.maps.LatLng(53.545701, -2.131714), panControl: false, disableDefaultUI: true, zoomControl: true, scrollwheel: false, panControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); setMarkers(map, locations); map.fitBounds(bounds); } google.maps.event.addDomListener(window, 'load', initialize); google.maps.event.addDomListener(window, 'resize', initialize); window.onpopstate = initialize(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <div id="map-canvas" style="height:400px; width:100%;"></div>