javascript - 1 つの HTML ページに 2 つの Google マップを追加する

Question

1 ページに 2 つの Google マップを表示したいのですが、何らかの理由で 2 つ目のマップが壊れています。

私が使用しているコードは次のとおりです。

    <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>

次に、2 つの 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

そのようにすべてを1つの初期化に組み合わせてみてください

<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>