javascript - Google maps set different zoom based on window resize - Stack Overflow

admin管理员组

文章数量:1326447

Following to my previous question Google maps responsive resize I would like to implement a different zoom level based on windows resize, while resizing, so if browser windows is "less than" apply x number of zooming and if "major than" apply another zooming level automatically and on the fly.

The following code works perfectly in regards of recentering the map on windows resize, I need to apply the new zoom levels to it:

var map; 
function initialize() {
  var mapOptions = {
  center: new google.maps.LatLng(40.5472,12.282715),
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
      mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center); 
  map.setZoom(zoom level needs to be automatically set according to window size);
});

Following to my previous question Google maps responsive resize I would like to implement a different zoom level based on windows resize, while resizing, so if browser windows is "less than" apply x number of zooming and if "major than" apply another zooming level automatically and on the fly.

The following code works perfectly in regards of recentering the map on windows resize, I need to apply the new zoom levels to it:

var map; 
function initialize() {
  var mapOptions = {
  center: new google.maps.LatLng(40.5472,12.282715),
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
      mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center); 
  map.setZoom(zoom level needs to be automatically set according to window size);
});

• javascript
• jquery
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Mar 2, 2019 at 13:19 rob.m asked Aug 26, 2013 at 14:23 rob.mrob.m 10.6k2121 gold badges8787 silver badges174174 bronze badges 3

• probably simplest to determine the bounds that you want visible and use map.fitBounds rather than map.setCenter. – geocodezip Commented Aug 26, 2013 at 14:42
• Does the map need to contain a specific set of points? Are there any other details you can provide? – rsnickell Commented Aug 26, 2013 at 14:57
• the map needs to contain a specific area with specific LatLng, the values are provided in the code above, the markers will be contained within this area – rob.m Commented Aug 26, 2013 at 15:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Construct the area you want to always be in view by creating a LatLngBounds and call map.fitBounds() as suggested by geocodezip.

本文标签： javascriptGoogle maps set different zoom based on window resizeStack Overflow