CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Johan
Johan

Reputation: 40628

Google Maps API v3 marker with image and a text on top of this image?

I'd like to display an image on a marker but on this image I'd like to also place some text (that I need to change dynamically during the life cycle of my application).

I've tried markerwithlabel and they have two different examples, one with a picture and another with text but I'd like to combine the two to create something similar to this:

enter image description here

Where "Wheeee!" should be specified (and be updatable) as text.

How can I achieve this?

Upvotes: 0

Views: 1433

Answers (1)

Matej P.
Matej P.

Reputation: 5383

You can use RichMarker from Google Maps Api Libraries. You can add any HTML to your marker (as showin in the example here).

So in your case, using RichMarker.setContent() (Api reference here) you would add custom HTML, something like (roughly, from your provided picture example):

myMarker.setContent('<div class="callout_bubble">
                       <i class="some_icon"></i>
                       <span class="inside_text" id="my_marker_X_text">Wheee!</span>
                     </div>');

And then add css styles to style it any way you want. Also you can change text inside <span> with id my_marker_X_text using js. If you want multiple markers just assign them multiple unique ids, or always change whole content of marker, that's up to you.

Upvotes: 1

Related Questions