谷歌地圖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);