使用相同的初始化函数加载2张Google地图

use*_*737 1 google-maps

我想使用除法类在同一页面上使用1个初始化函数加载2个Google地图。但是地图没有被加载。有人可以帮忙吗?这是我的代码:

<!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>
Run Code Online (Sandbox Code Playgroud)

Ste*_*Web 5

好的,您的来源中有一些市长问题:

  1. 无效的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>
Run Code Online (Sandbox Code Playgroud)
  1. 您无法通过容器类名称来初始化Google地图。所有容器必须是唯一的。如您所见,我正在创建2个单独的地图“ map andmap2”,因此我在body标签中需要两个单独的容器,例如:

    <div id="map-canvas"></div>
    <div id="map-canvas2"></div>
    
    Run Code Online (Sandbox Code Playgroud)
  2. 您不必在body标签中调用initialize函数,因为它将通过窗口上的eventListener进行调用-加载

    google.maps.event.addDomListener(window, 'load', initialize);
    
    Run Code Online (Sandbox Code Playgroud)

因此,让我们将它们放在一起: FIDDLE