Как создать более одной карты Google? - PullRequest
Новая
       1

Как создать более одной карты Google?

0 голосов
/ 29 апреля 2018

Я пытался получить две (нужны три) карты Google для работы над моим проектом.

У меня есть первый, работающий с этим; 

<div class="map" id="map"></div>



function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  center: uluru
});
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});
}

Теперь, когда я пытаюсь заставить работать второй, он просто не работает. Я пытался найти другие решения, но безуспешно.

Эти две другие карты находятся на странице, отличной от указанной выше.

Глядя на некоторые вещи, это может быть так просто, как показано ниже? Я попробовал что-то похожее на это, но тоже не повезло. 

<div class="map" id="map"></div>
<div class="map" id="map__2"></div>

function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  center: uluru
});
var map_SecondMap = new google.maps.Map(document.getElementById('map__2'), {
  zoom: 4,
  center: uluru
});
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});
var marker_SecondMap = new google.maps.Marker({
  position: uluru,
  map: map
});
}

Я думаю, что я мог бы сделать этот путь сложнее, чем нужно, но мне показалось странным, что у самих Google нет примера (они могли бы сделать, я просто его не видел) для этого.

Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 29 апреля 2018

Я не уверен, что ты делаешь неправильно. Я смог использовать ваш код почти так же, как и получить две карты на одной странице. Я изменил две вещи:

  1. Я убедился, что оба divs имеют размеры
  2. Я изменил вам второй маркер, который будет применен к map_SecondMap

Вот весь HTML-код, который работает, на тот случай, если вы видите что-то отличное от вашего: 

<html>

<head>
    <style>
        .map{
            width: 300px;
            height: 300px;
            margin: 50px;
        }
    </style>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"
    type="text/javascript"></script>
</head>

<body>
    <div class="map" id="map"></div>
    <div class="map" id="map__2"></div>
    <script>
        function initMap() {
            var uluru = {lat: 54.5973, lng: -5.9301};
            var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
            var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: uluru
            });
            var map_SecondMap = new google.maps.Map(document.getElementById('map__2'), {
            zoom: 4,
            center: uluru
            });
            var marker = new google.maps.Marker({
            position: uluru,
            map: map
            });
            var marker_SecondMap = new google.maps.Marker({
            position: uluru,
            map: map_SecondMap
            });
        }
    </script>
</body>

</html>
0 голосов
/ 29 апреля 2018

Убедитесь, что у вас есть правильная ширина и высота для двух div

и убедитесь, что у вас есть событие для запуска исключения initMap ()

и убедитесь, что две карты используют связанную карту объекта карты и map_SecondMap 

  <div class="map" id="map"  style='height: 300px; width:300px'></div>
  <div class="map" id="map2" style='height: 300px; width:300px'></div>

  function initMap() {
      var uluru = {lat: 54.5973, lng: -5.9301};
      var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru
      });
      var map_SecondMap = new google.maps.Map(document.getElementById('map2'), {
        zoom: 4,
        center: uluru_SecondMap
      });
      var marker = new google.maps.Marker({
        position: uluru,
        map: map
      });
      var marker_SecondMap = new google.maps.Marker({
        position: uluru_SecondMap,
        map: map_SecondMap
      });
  }

    google.maps.event.addDomListener(window, 'load', initMap);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...