javascript - 在一个 HTML 页面上添加两个谷歌地图

Question

我希望在一页上有两张谷歌地图，但由于某种原因第二张地图坏了。

我正在使用的代码如下：

    <style>
#map-london {
    width: 500px;
    height: 400px;
}
#map-belgium {
    width: 500px;
    height: 400px;
}
</style>

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script>
    function initialize() {
      var myLatlng = new google.maps.LatLng(51.518865,-0.133108);
      var mapOptions = {
        zoom: 17,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById('map-london'), mapOptions);

      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Incopro London'
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<script>
    function initializeB() {
      var myLatlngBel = new google.maps.LatLng(50.802138,-1.07839);
      var mapOptionsBel = {
        zoom: 17,
        center: myLatlngBel,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var mapB = new google.maps.Map(document.getElementById('map-belgium'), mapOptionsBel);

      var markerB = new google.maps.Marker({
          position: myLatlngBel,
          map: mapB,
          title: 'Incopro Belgium'
      });
    }

    google.maps.event.addDomListener(window, 'load', initializeB);
</script>

然后我使用两个 div 来显示地图：

<div id="map-london"></div>
<div id="map-belgium"></div>

有谁知道我该如何解决这个问题？

提前致谢。

Answer 1

这是 JS Fiddle

http://jsfiddle.net/89hv75h1/1/

    <!-- Your first Map -->d
       <div id="map-canvas" style="width:100%; height:333px"></div>
         <br/><hr/>
       <!-- your second Map -->
       <div id="map-canvas_2" style="width:100%; height:333px"></div>
<script>
     function initialize() {
          var myLatlng = new google.maps.LatLng(25.18694, 55.2609596);
          var myLatlngBel = new google.maps.LatLng(25.18694, 55.2609596);

          var mapOptions = {
            zoom: 17,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          }

          var mapOptionsBel = {
            zoom: 17,
            center: myLatlngBel,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          }

          var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
          var mapB = new google.maps.Map(document.getElementById('map-canvas_2'), mapOptionsBel);

          marker = new google.maps.Marker({
        map:map,
        draggable:false,
        animation: google.maps.Animation.BOUNCE,
        position: myLatlng,
          icon: "http://oi62.tinypic.com/6fxyx5.jpg"
      });

          markerB = new google.maps.Marker({
            map:mapB,
            draggable:false,
            animation: google.maps.Animation.BOUNCE,
            position: myLatlngBel,
             icon: "http://oi62.tinypic.com/6fxyx5.jpg"
          });
            marker.setAnimation(google.maps.Animation.BOUNCE);
            markerB.setAnimation(google.mapB.Animation.BOUNCE);
        }   
        google.maps.event.addDomListener(window, 'load', initialize);


    $(document).ready(function() {

            initialize();

    });
</script>

Answer 2

尝试将所有内容组合在一个初始化中，像这样

<script>
    function initialize() {
      var myLatlng = new google.maps.LatLng(51.518865,-0.133108);
      var myLatlngBel = new google.maps.LatLng(50.802138,-1.07839);

      var mapOptions = {
        zoom: 17,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var mapOptionsBel = {
        zoom: 17,
        center: myLatlngBel,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById('map-london'), mapOptions);
      var mapB = new google.maps.Map(document.getElementById('map-belgium'), mapOptionsBel);

      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Incopro London'
      });
      var markerB = new google.maps.Marker({
          position: myLatlngBel,
          map: mapB,
          title: 'Incopro Belgium'
      });
    }    
    google.maps.event.addDomListener(window, 'load', initialize);
</script>