Google Maps: Wie man benutzerdefinierte Markierungen wie Airbnb macht?

Question

Ich möchte eine Karte mit benutzerdefinierten Markern wie Airbnb machen:

Das heißt, die Markierung mit Preisnummer und Platz Look. Der Code ist wie folgt:

<div class="map-marker" style="position: absolute; overflow: hidden; opacity: 0.01; margin-left: 0px; margin-top: 0px; left: 267px; top: 237px; z-index: 238; display: block; cursor: pointer;" onselectstart="return false;" ondragstart="return false;" title=""> 
    <div class="tooltip tooltip-bottom-middle tooltip-layout tooltip-primary"> 
    <div class="price-marker__label"> 
     <div class="price-label"> 
     <sup class="currency-prefix">$</sup> 
     <span class="price-amount">108</span> 
     </div> 
    </div> 
    </div> 
</div> 

Ich dachte, es wäre sehr einfach. Definieren Sie eine benutzerdefinierte HTML-Markerkomponente, übergeben Sie sie mit ihren Koordinaten an die Google Maps, und sie wird dort sein.

Aber es scheint komplexer als das.

Ich finde Custom Google Map Marker like in Trulia map. Es ist meiner Frage sehr ähnlich. Allerdings ist die MarkwithLable jetzt nicht verfügbar.

Was ich in Google API-Dokument finden kann, ist . Dies ist nur ein einfacher Marker mit einem Label. Und ich sehe keinen benutzerdefinierten HTML compoment Pass in

---

UPDATE:.

Ich denke RichMarker (https://github.com/googlemaps/js-rich-marker), vielleicht, was ich suche?

Answer 1

Sie können Ihre benutzerdefinierten Markierertypen gesetzt, und sie dann zuordnen, wie Sie wollen ....

Haben Sie durchgearbeitet/das /?

https://developers.google.com/maps/documentation/javascript/tutorials/custom-markers