使用相同的初始化函數加載2谷歌地圖

我想加載2谷歌地圖使用1初始化函數在同一頁上使用師類。但地圖沒有被加載。誰能幫忙？這裏是我的代碼：使用相同的初始化函數加載2谷歌地圖

<!DOCTYPE html> 
<html> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"> 
     </script> 
     <script> 
function initialize() { 
    var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644) 
    }; 

    var map = new google.maps.Map(document.getElementsByClassName('map-canvas'), 
     mapOptions); 
} 
</script> 
<body> 

<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;" > 
<script> 
initialize();  
//google.maps.event.addDomListener(window,'load',initialize); 
</script> 
</div><!-- /.panel-body --> 

<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;" > 
<script> 
initialize();  
//google.maps.event.addDomListener(window,'load',initialize); 
</script> 
</div><!-- /.panel-body --> 


             </body> 
             </html>

來源

2014-09-29 user3062737

好有你源的一些市長的問題：

無效的HTML結構

您的腳本必須放置在head標記上方body這樣的標籤：

<head> 
    <title></title> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"> 
    </script> 

    <script> 
     var map; 
     var map2; 
     function initialize() { 
      var mapOptions = { 
       zoom: 8, 
       center: new google.maps.LatLng(-34.397, 150.644) 
      }; 
      map = new google.maps.Map(document.getElementById('map-canvas'), 
       mapOptions); 
      map2 = new google.maps.Map(document.getElementById('map-canvas2'), 
       mapOptions); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script>  
</head>

您無法通過容器類名稱初始化Google地圖。所有容器必須是唯一的。正如你看到的，我創建2個獨立的地圖「地圖and map2`，因此我需要在身體標記兩個不同的容器，如：
```
<div id="map-canvas"></div> 
<div id="map-canvas2"></div> 
```
您不必調用初始化函數在你的身體標記因爲它會被稱爲throught窗口上的事件監聽 - 負載
```
google.maps.event.addDomListener(window, 'load', initialize); 
```

所以讓我們把它們放在一起： FIDDLE

來源

2014-09-29 11:41:39

getElementsByClassName返回元素數組
您需要在文檔onload事件觸發後運行初始化函數。

function initialize() { 
 
    var mapOptions = { 
 
    zoom: 8, 
 
    center: new google.maps.LatLng(-34.397, 150.644) 
 
    }; 
 
    elems = document.getElementsByClassName('map-canvas'); 
 
    for (var i = 0; i < elems.length; i++) { 
 
    var map = new google.maps.Map(elems[i], 
 
     mapOptions); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script> 
 
<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;"> 
 
</div> 
 
<!-- /.panel-body --> 
 

 
<div class="map-canvas" style="height:200px;width:200px;border: 1px solid black;"> 
 
    <script> 
 
    initialize(); 
 
    //google.maps.event.addDomListener(window,'load',initialize); 
 
    </script> 
 
</div> 
 
<!-- /.panel-body -->

來源

2014-09-29 13:07:48 geocodezip

使用相同的初始化函數加載2谷歌地圖

回答

相關問題