使用自定義標記

Question

我想使用自定義標記（圖像）到我的地圖。

目前我的代碼看起來是這樣的：

<script> 
function myMap() { 
    var mapCanvas = document.getElementById("map"); 
    var mapOptions = { 
    center: new google.maps.LatLng(47.3921611, 8.4957963), 
    zoom: 14 
    } 

    var map = new google.maps.Map(mapCanvas, mapOptions); 
} 
</script> 

我怎麼能實現它向我的代碼？

Answer 1

從Google's "simple Marker" example：

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
    var beachMarker = new google.maps.Marker({ 
     position: {lat: -33.890, lng: 151.274}, 
     map: map, 
     icon: image 
    }); 

代碼段與它添加到代碼中你的問題：

function myMap() { 
 
    var mapCanvas = document.getElementById("map"); 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(47.3921611, 8.4957963), 
 
    zoom: 14 
 
    } 
 

 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
 
    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
 
    var beachMarker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    map: map, 
 
    icon: image 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', myMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
}

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