How to create custom markers and when mouseover on marker I need a tooltip. Can any one suggest to me how to do these type of markers?

I need markers like in the below image:

enter image description here


2 Answers 2


You can create custom markers with code similar to the following:

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: iconBase + 'schools_maps.png'

See the Custom Marker Documentation for more details.

As for the 'tooltips', check out the InfoWindow Documentation.

And here is a jsfiddle that demonstrates a custom marker with an infowindow.

  • Thanks for your reply,but i need to know how to design that infowindow and custom markers with dynamic content.Is that infowindow or tooltip???
    – user30544
    May 24, 2014 at 9:20

Your screenshot seems to display markers with labels (The orange small box with the two red boxes). Just go to the google-maps-utility-library-v3 website and you will see in action markers with labels like in this demo. The API docs are there.

For the only "big box" with all infos, to custom, you can use instead of InfoWindow the InfoBox component with the link to API and samples. InfoBox component is not native, it's a component extending Google Maps v3.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.