Я пытаюсь добавить маркер, используя Google Maps Javascript API, но он не работает - PullRequest
Новая
       23

Я пытаюсь добавить маркер, используя Google Maps Javascript API, но он не работает

0 голосов
/ 08 апреля 2019

Это мой код Javascript для получения маркера. Страница загружает карту, но маркер не появляется. 

function initMap(){
      var options = {
        zoom:13,
        center:{lat:42.3601,lng:-71.0589}//Change these coordinates to change the center
      }
      var map = new google.maps.Map(document.getElementById('map'),options);
    }
    var location = new google.maps.LatLng(42.3601, -71.0589);
    var marker = new google.maps.Marker({
      position:location,
      map:this
    });
    marker.setMap(map);

1 Ответ

0 голосов
/ 08 апреля 2019

Два выпуска:

  1. создайте marker внутри вашей функции initMap (которая, скорее всего, является функцией обратного вызова, которая запускается после загрузки API)

  2. используйте допустимое значение для объекта google.maps.Map. (лучше всего использовать переменную map внутри функции initMap, this там, где у вас есть, вероятно, объект window). 

function initMap(){
  var options = {
    zoom:13,
    center:{lat:42.3601,lng:-71.0589}//Change these coordinates to change the center
  }
  var map = new google.maps.Map(document.getElementById('map'),options);
  var location = new google.maps.LatLng(42.3601, -71.0589);
  var marker = new google.maps.Marker({
    position:location,
    map:map
  });
}

подтверждение концепции скрипки

screenshot of resulting map

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

function initMap() {
  var options = {
    zoom: 13,
    center: {
      lat: 42.3601,
      lng: -71.0589
    } //Change these coordinates to change the center
  }
  var map = new google.maps.Map(document.getElementById('map'), options);
  var location = new google.maps.LatLng(42.3601, -71.0589);
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
}
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
...