How to add tooltip for each marker?

6,910 views
Skip to first unread message

Eliot

unread,
Nov 2, 2010, 6:52:14 AM11/2/10
to google-map...@googlegroups.com
Hi
my page is:  http://alborzhosting.com/map/uni.html
i want to add tootip for each of markers in the map.
how can i do this?

Message has been deleted

Eliot

unread,
Nov 2, 2010, 8:30:43 AM11/2/10
to Google Maps JavaScript API v3

Do you mean by displaying an infoWindow when markers are clicked?
If that's the case you may create infoWindow with the information and
then attach it to the marker. That for each marker.

e.g:


var map = new google.maps.Map(document.getElementById("map_canvas"),
myMapOptions);

var marker = new google.maps.Marker({ ...marker options
});

var infoWindow = new google.maps.InfoWindow({
content: 'The message that will be displayed when clicked'
});

google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});

Hope it helps.
========================
i do this but i have a problem.
please see the page.
http://alborzhosting.com/map/uni.html

Rossko

unread,
Nov 2, 2010, 8:31:22 AM11/2/10
to Google Maps JavaScript API v3
> i want to add tootip for each of markers in the map.

You could try the documentation
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers
although I can already see tooltips on your markers

CSharp

unread,
Nov 2, 2010, 12:20:39 PM11/2/10
to google-map...@googlegroups.com
I noticed that on Google map, the tool tip for some of the markers contain extra info and that the tool tips float close to the mouse pointer and will float within the boundaries of the browser window.  Are those custom tooltip containers outside of the Google Map API or are they part of the Javascript API?  For example:
 
1) Open up Google.com
2) click on the Maps link
3) Type in the following:  Lafayette, IN, United States hotels
4) hover over any of the round red dots, especially the ones close to the "A" marker near West Lafayette.
 
 
The Tooltip box examples from the original post seems like the ones I've incorporated in my Google Maps as well and they don't contain much info and the tooltip does not float like the ones in the Google's Google Map.

Rossko

unread,
Nov 2, 2010, 3:14:48 PM11/2/10
to Google Maps JavaScript API v3
> I noticed that on Google map, the tool tip for some of the markers
> contain extra info and that the tool tips float close to the mouse
> pointer and will float within the boundaries of the browser window. Are
> those custom tooltip containers outside of the Google Map API

Yes

> or are they part of the Javascript API?

No. Google leave it the developer to create their own fancy
'tooltips' in whatever style they want, and provide API mouseover
events for the purpose.
Reply all
Reply to author
Forward
0 new messages