Добавление двух карт Google на одну страницу HTML

Question

Добавление двух карт Google на одну страницу HTML

0

Я хочу иметь две карты Google на одной странице, но по какой-то причине вторая карта сломана.

Код, который я использую, выглядит следующим образом:

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

Кто-нибудь знает, как я могу это исправить?

Заранее спасибо.

Daniel Pilch 19 сен. 2013, в 16:22

Источник

Теги:

javascript

html

css

google-maps

2 ответа

Ещё вопросы

Muhammad Tahir · Answer 1 · 2014-05-14T08-01-00.000Z

вот 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>

Last Rose Studios · Answer 2 · 2013-09-19T12-41-00.000Z

Попробуйте комбинировать все в одной инициализации, например, так

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