使谷歌地圖響應沒有iframe

Question

例如，如果您使用嵌入式谷歌地圖。

你可以用IFRAME（簡單的iframe）讓你的谷歌地圖與響應下面的代碼

<div class="ggmap"> 
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212270.5451230493!2d-84.42060395!3d33.7677129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f5045d6993098d%3A0x66fede2f990b630b!2sAtlanta%2C+GA!5e0!3m2!1sen!2sus!4v1396981185525" width="600" height="450" frameborder="0" style="border:0"></iframe> 
</div> 

.ggmap { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 

.ggmap iframe, 
.ggmapr object, 
.ggmap embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

但是我用谷歌地圖由JavaScript這樣的下面。

沒有IFRAME（簡單無IFRAME）

<div id="map_canvas" style="width:600px; height:450px"></div> 

function writeMap(latitude,longitude) { 
    var latlng = new google.maps.LatLng(latitude,longitude); 
    var opts = { 
    zoom: 15, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), opts); 
} 

$(document).ready(function(){ 
     writeMap(latitude,longitude);  
}); 

在這種情況下，谷歌地圖無法響應。

如何讓這個谷歌地圖響應？

Answer 1

確定容器的高度和寬度百分比（並確保容器的大小）。

var latitude = 42.0; 
 
var longitude = -72.0; 
 
function writeMap(latitude,longitude) { 
 
    var latlng = new google.maps.LatLng(latitude,longitude); 
 
    var opts = { 
 
    zoom: 15, 
 
    center: latlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("map_canvas"), opts); 
 
} 
 

 
$(document).ready(function(){ 
 
     writeMap(latitude,longitude);  
 
});

body, html, #map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" ></div>