Skip to content Skip to sidebar Skip to footer

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

Solution 1:

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.


Post a Comment for "Google Maps API V3 Marker With Image And A Text On Top Of This Image?"