Javascript Google Maps API - 标记不显示

Question

我在单独的 .js 文件中有以下代码，但由于某种原因，当我加载页面时，制造商没有出现，只有地图。

document.addEventListener('DOMContentLoaded', drawMap);  

//MAP

function drawMap() { 

    var myLatLong = new google.maps.LatLng(53.4680477, -2.2400482); 

        var mapOptions = {
            center: myLatLong, 
          zoom: 14 
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), 
            mapOptions);
      }

//MARKERS

var marker = new google.maps.Marker( 
    {
        position: myLatLong, 
        map: map,
        title: "Marker"
    }
);

marker.setMap(map); 

Answer 1

我注意到在初始化地图之前添加了 ma​​rker.setMap(map);。 请尝试以下操作：

function drawMap() {
  // init maps then add marker to map
  marker.setMap(map);
}

这是Google developers doc提供的示例

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

希望这会有所帮助。

Answer 2

试试这个

document.addEventListener('DOMContentLoaded', drawMap);

//MAP

function drawMap() {

    var myLatLong = new google.maps.LatLng(53.4680477, -2.2400482);

    var mapOptions = {
        center: myLatLong,
        zoom: 14
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    //MARKERS

    var marker = new google.maps.Marker({
        position: myLatLong,
        map: map,
        title: "Marker"
    });

    marker.setMap(map);
}