根据浏览器调整大小调整google地图

我正在google map api v3上工作。地图完美呈现在我的网页...问题是，当我调整浏览器，地图适合到原来的大小，当我加载网页...根据浏览器调整大小调整google地图

初始状态时，我加载页面 enter image description here

时我调整浏览器的大小，地图的大小仍然是初始状态。

enter image description here

[代码]

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head> 
<script src="http://code.jquery.com/jquery-1.7.2.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script type='text/javascript'> 
var point; 
var mrktx; 

function mshow() 
{ 
     $("#search_content").css("display",""); 
} 
function mhide() 
{ 
     $("#search_content").css("display","none"); 
} 

function load() { 

    if(navigator.geolocation) 
    { 
     navigator.geolocation.getCurrentPosition(ShowPosition) 
    } 
    else 
    { 
     alert("Browser does not support"); 
     setTimeout(function(){ window.location = "../" },500); 
    } 
    function ShowPosition(position) 
    { 
     var lat = position.coords.latitude; 
     var lng = position.coords.longitude; 


    var cwidth = document.getElementsByTagName("body")[0].clientWidth; 
    var cheight = document.getElementsByTagName("body")[0].clientHeight; 
    //alert(cwidth + ',' + cheight); 
    $("#body").css("overflow","hidden"); 
    $("#map_canvas").css("position","absolute"); 
    $("#map_canvas").css("overflow","auto"); 
    $("#map_canvas").css("height",cheight); 
    $("#map_canvas").css("width",cwidth); 
    $("#map_canvas").css("z-index","99") 
    $("#map_canvas").css("top","0"); 
    $("#map_canvas").css("left","0em"); 
    $("#top_nav").css("width",cwidth); 
    $("#top_nav").css("height","8%"); 

    var latlng = new google.maps.LatLng(lat,lng); 
    var myOptions = { 
     zoom: 11, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), 
       myOptions); 

    $('document').resize(function(){ 
     google.maps.event.trigger(map, 'resize'); 
     map.setZoom(map.getZoom()); 
    }); 



    var myMrkrTxt = ""; 
    var infowindow = new google.maps.InfoWindow({ content : myMrkrTxt });  
    var myMrkr = new google.maps.Marker({position:latlng,map:map}); 
     google.maps.event.addListener(myMrkr,'mouseover', function(){ infowindow.open(map,myMrkrTxt); }); 
     google.maps.event.trigger(map, "resize"); 


    } 

} 
</script> 
<style> 
#top_nav 
{ 
    position: absolute; z-index: 200; top: 0px; background-color: black; 
} 
#top_nav h2 
{ 
    color: white; 
} 
body, html { 
    height: 100%; 
    width: 100%; 
} 



</style> 
</head> 
<body onload='load()'> 


<div id="map_canvas"></div> 
</body> 
</html>

来源

2012-07-22 Waqas Ahmed

我猜你要调整你的map_canvas提供为好。

所以只需添加到您的调整大小（）

//its maybe better to attach this handler to the window instead of the document 
$(window).resize(function(){ 
     $('#map_canvas').css("height",$(window).height()); 
     $('#map_canvas').css("width",$(window).width()); 
     google.maps.event.trigger(map, 'resize'); 
     map.setZoom(map.getZoom()); 
    });

所以你必须跟踪您browserwindow :)

来源

2012-07-22 09:07:47 easteregg

我实现这个..当我调整我的浏览器了进来这个功能，但我的地图保持不变，宽度和高度....我也concatina这个'$（窗口）。使用这个$（window）.height（）+'px''调整高度（）'，但不调整我的地图的大小.... – 2012-07-22 09:38:36

我得到了解决方案.... 我编辑我的节点。在这里，我在我的代码注释这些行 '$（ “map_canvas” 的），CSS（ “高度”，cheight）;' '$（ “map_canvas” 的），CSS（ “高度”，cheight）;' 和添加一个'' 我'' – 2012-07-22 09:46:58

它的作品谢谢！ – 2014-07-11 06:31:47

同样的事情，可以只用CSS也要做的大小调整的。我将在下面举一个例子，如果你喜欢，请使用它。

.google-maps { 
 
    position: relative; 
 
    padding-bottom: 75%; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
.google-maps iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
}

<div class="google-maps"> 
 
    <iframe src="https://www.google.com/maps/yourmapsblah" width="765" height="500" frameborder="3" style="border:0" allowfullscreen></iframe> 
 
</div>

来源

2016-01-09 13:16:48 PizzaBoy

好的东西链接到小提琴，但它也有助于在您的答案中写下具体细节（例如解决问题的特定CSS）。 – Sam 2016-01-09 13:22:27

根据浏览器调整大小调整google地图

回答

相关问题