How to Control Zoom Level Based on Windows Size In Google Maps

雨燕双飞 提交于 2019-12-22 17:54:59

问题


I am trying to create a responsive Google Map using Bootstrap.Here is a sample of what I did till now . What I need to do is setting a method to control the map's zoom level based on the windows size.For example as when as user re-size the map the map start zooming out and zooming in on the other way! Can you please let me know if this is possible and how I can do it?

var map;
var panorama;
jQuery(function($) {
$(document).ready(function() {
    var latlng = new google.maps.LatLng(49.241943,-122.889318);
    var myOptions = {
        zoom: 18,
        center: latlng,
        panControl: true,
        zoomControl: true,
        zoomControlOptions: {
                              style: google.maps.ZoomControlStyle.SMALL
                            },
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
       };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    });
 });

回答1:


You can change the zoom level of the map with this:

var mq = window.matchMedia( "(min-width: 768px)" );
if (mq.matches) {
    map.setZoom(6);
}


来源:https://stackoverflow.com/questions/17000951/how-to-control-zoom-level-based-on-windows-size-in-google-maps

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!