Несколько карт Google на странице с маркерами - PullRequest
Новая
       72

Несколько карт Google на странице с маркерами

1 голос
/ 06 ноября 2019

Я использую следующий код для отображения нескольких карт Google на веб-сайте, который работает правильно. Но я изо всех сил пытаюсь добавить маркер в позицию LatLng на каждой карте. 

<div id="block-wrp">
<div class="block-item">
<div id="mapCanvas1" class="map-item"> </div>
<span class="city-name">London</span> </div>
<div class="block-item">
<div id="mapCanvas2" class="map-item"> </div>
<span class="city-name">Amsterdam</span> </div>
</div>

<script type="text/javascript">
var map1, map2;
function drawMap() {

    var mapOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
      fullscreenControl: false 
     }
    mapOptions.center = new google.maps.LatLng(51.509865, -0.118092); // London
    map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);

    mapOptions.center = new google.maps.LatLng(52.370216, 4.895168); // Amsterdam
    map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);
 }

1 Ответ

1 голос
/ 06 ноября 2019

Для каждого маркера просто добавьте правильное значение объекта карты в свойство карты 

function drawMap() {

    var mapOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true,
      fullscreenControl: false 
     }
    mapOptions.center = new google.maps.LatLng(51.509865, -0.118092); // London
    map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);

    mapOptions.center = new google.maps.LatLng(52.370216, 4.895168); // Amsterdam
    map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);


    marker1Pos =   new google.maps.LatLng(51.509865, -0.118092);
    var marker1 = new google.maps.Marker({
    position: marker1Pos,
    map: map1,
    title: "Hello World! I'm in map1"
  });

    marker2Pos =  new google.maps.LatLng(52.370216, 4.895168);
    var marker2 = new google.maps.Marker({
    position: marker2Pos,
    map: map2,
    title: "Hello World! I'm in map2"
  });
 }

фрагмент кода: 

function drawMap() {

  var mapOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    fullscreenControl: false
  }
  mapOptions.center = new google.maps.LatLng(51.509865, -0.118092); // London
  map1 = new google.maps.Map(document.getElementById("mapCanvas1"), mapOptions);

  mapOptions.center = new google.maps.LatLng(52.370216, 4.895168); // Amsterdam
  map2 = new google.maps.Map(document.getElementById("mapCanvas2"), mapOptions);


  marker1Pos = new google.maps.LatLng(51.509865, -0.118092);
  var marker1 = new google.maps.Marker({
    position: marker1Pos,
    map: map1,
    title: "Hello World! I'm in map1"
  });

  marker2Pos = new google.maps.LatLng(52.370216, 4.895168);
  var marker2 = new google.maps.Marker({
    position: marker2Pos,
    map: map2,
    title: "Hello World! I'm in map2"
  });
}
.map {
  height: 300px;
  width: 400px;
  border: solid black 1px;
}
<div id="mapCanvas1" class="map"></div>
<div id="mapCanvas2" class="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=drawMap" async defer></script>
...