没有使用Google Map API显示地图标记

Question

我已经集成了Google Map api代码。 地图显示正常，但地图标记未显示。

<div id="googleMap" style="width:100%;height:400px;"></div>

<script>
function myMap() {
var centerPosition = {lat: 51.508742, lng: -0.120850};
var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
          position: centerPosition,
          map: mapProp,
          title: 'Hello World!'
        });
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_API_KEY&callback=myMap"></script>

Answer 1

您将地图设置为错误的地图

map: mapProp, -> map: map,

为您实现的功能：

var centerPosition = {
    lat: 51.508742,
    lng: -0.120850
  };
  var mapProp = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    zoom: 5,
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
  var marker = new google.maps.Marker({
    position: centerPosition,
    map: map,
    title: 'Hello World!'
  });

工作的JSFiddle： https ://jsfiddle.net/6fey85dd/8/

Answer 2

仅仅是因为您设置给标记的属性应该是map而不是mapProp：

var marker = new google.maps.Marker（{position：centerPosition，map：map，title：'Hello World！'}）; }