根據瀏覽器調整大小調整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地圖

回答

相關問題