Menu
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);
});
781
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.
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.
Google Maps was built on a 256x256 pixel tile system where zoom level 0 was a 256x256 pixel image of the whole earth. A 256x256 tile for zoom level 1 enlarges a 128x128 pixel region from zoom level 0.
Setting up the minimum or maximum Zoom value for Google Maps can be done by adding the shortcode attribute with Store Locator Shortcode. Furthermore, the maximum value of Google Maps Zoom level is 22. Therefore, the defined maximum value must be below or equal to 22, which is the default.
Construct the area you want to always be in view by creating a LatLngBounds and call map.fitBounds() as suggested by geocodezip.
93
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
