Verwenden benutzerdefinierter Markierung

Question

Ich möchte eine benutzerdefinierte Markierung (Bild) zu meiner Karte verwenden.

Derzeit sieht mein Code wie folgt aus:

<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> 

Wie kann ich es meinen Code implementieren?

Answer 1

Von 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 
    }); 

Code-Snippet mit ihm, um den Code in Ihrer Frage hinzugefügt:

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>