谷歌地图js标记不显示

Question

我想实现一个谷歌地图到一个项目，但我不能让标记显示在地图上。这里是我的代码：

的HTML：

<div id="map-canvas"></div> 

CSS：

#map-canvas { 
    border: 1px solid #D8D8D8; 
    height: 445px; 
    width: 100%; 
} 

JS：

function initialize() { 
     var myLatLng = {lat: 40.6700, lng: -73.9400}; 
     var mapCanvas = document.getElementById('map-canvas'); 
     var mapOptions = { 
      center: myLatLng, 
      zoom: 13, 
      navigationControl: true, 
      mapTypeControl: true, 
      scaleControl: true, 
      scrollwheel: false, 
      draggable: true, 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     } 
     var map = new google.maps.Map(mapCanvas, mapOptions) 

     var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map-canvas, 
       icon: "../images/map.png", 
       title: 'Find us here!' 
      }); 
     marker.setMap(map-canvas); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 

我看过一些线程，并试图多个代码变种和似乎没有任何上班。任何帮助表示赞赏。

Answer 1

假设你标记的图标是可用的，你需要的marker的map属性设置为google.maps.Map对象。在你的代码，map不map-canvas

变化：

var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map-canvas, 
      icon: "../images/map.png", 
      title: 'Find us here!' 
     }); 
    marker.setMap(map-canvas); 

要：

var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: "../images/map.png", 
      title: 'Find us here!' 
     }); 
    marker.setMap(map); 

proof of concept fiddle

代码片段：

function initialize() { 
 
    var myLatLng = { 
 
    lat: 40.6700, 
 
    lng: -73.9400 
 
    }; 
 
    var mapCanvas = document.getElementById('map-canvas'); 
 
    var mapOptions = { 
 
    center: myLatLng, 
 
    zoom: 13, 
 
    navigationControl: true, 
 
    mapTypeControl: true, 
 
    scaleControl: true, 
 
    scrollwheel: false, 
 
    draggable: true, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    } 
 
    var map = new google.maps.Map(mapCanvas, mapOptions) 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myLatLng, 
 
    map: map, 
 
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png", 
 
    title: 'Find us here!' 
 
    }); 
 
    marker.setMap(map - canvas); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas { 
 
    border: 1px solid #D8D8D8; 
 
    height: 445px; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>

Answer 2

尝试改变：

var map = new google.maps.Map(mapCanvas, mapOptions) 

要：

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);