CODEWITHSUNDEEP
angularjsgoogle-mapsangular-google-maps
user1759848
user1759848

Reputation: 243

angular-google-maps infowindow/tooltip on hover over marker

I'm relatively new to angular.

I'm using angular-google-maps and can't figure out how to get a tooltip/infowindow to display when hovering over a marker: basically what you get when you use the straight google maps api and set the 'title' attribute of the marker object (as in https://developers.google.com/maps/documentation/javascript/examples/marker-simple)

I've tried the markers element with the labelContnent attribute, and the marker with the marker-label element - neither shows a tooltip with the marker title.

The angular-google-maps demo (http://angular-google-maps.org/demo) also doesn't show any tooltips, so I don't think I'm doing anything wrong.

The question is, how do I get the title to display?

TIA!

Upvotes: 4

Views: 7099

Answers (1)

Kristopher Johnson
Kristopher Johnson

Reputation: 82535

You need to provide an options member containing the title when creating the markers.

Sorry that I don't have a small working example, but you'll want your marker object(s) to look something like this:

var marker = {
    coords: { latitude: 38.8977, longitude: -77.0366 },
    icon: 'images/whitehouse.png',
    options: { title: 'The White House' }
    id: 12345
};

and then specify all those property names in the <marker> or <markers> directive.

Then a tooltip should appear when the mouse hovers over the icon. Note that browsers can be very slow to show an icon, so leave the mouse over it for a couple of seconds before deciding it's not working.

If you want to show an info window rather than a tooltip, you'll need to handle the mouseover and mouseout events. The documentation is currently (June 2014) pretty vague about how to do that, and it is only supported for <marker>, not for <markers>.

Upvotes: 4

Related Questions