我正在尝试使用Google Maps Javascript API添加标记，但它无法正常工作

Question

这是我获取标记的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);

Answer 1

两个问题：

1. 在initMap函数中创建marker （很可能是加载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
  });
}

概念证明小提琴

代码段：

 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>