Tooltip over a Polygon in Google Maps - google-maps

Question

I have polygons for various region and states in my application. Markers implement tooltip by taking the title attribute. On mouseover and mouseout over a polygon events can be fired. How do I create a tooltip that looks like the tooltip that is implemented for a marker.
Edit-1: Adding the code used to create the polygon and attach the handlers to show/hide tooltips.
function addPolygon(points) {
var polygon = new google.maps.Polygon({
paths: points,
strokeColor: " #FFFFFF",
strokeOpacity: 0.15,
strokeWeight: 1.5,
fillColor: "#99ff66",
fillOpacity: 0.14
});
var tooltip = document.createElement('div');
tooltip.innerHTML = "Alok";
google.maps.event.addListener(polygon,'mouseover',function(){
tooltip.style.visibility = 'visible';
});
google.maps.event.addListener(polygon,'mouseout',function(){
tooltip.style.visibility = 'hidden';
});
polygon.setMap(map);
}

Answer 1

There's actually a neat trick to work around this (strange) limitation in Google Maps. When moving your mouse over a data item, you can just add a tooltip to the map's <div>. It will be added at the location where your mouse pointer currently is - right over the item!
map.data.addListener('mouseover', mouseOverDataItem);
map.data.addListener('mouseout', mouseOutOfDataItem);
...
function mouseOverDataItem(mouseEvent) {
const titleText = mouseEvent.feature.getProperty('propContainingTooltipText');
if (titleText) {
map.getDiv().setAttribute('title', titleText);
}
}
function mouseOutOfDataItem(mouseEvent) {
map.getDiv().removeAttribute('title');
}

Answer 2

I think you will have to do it yourself.In a page i have implemented i attached a mouse move event to the page so i can record the mouse position.Then when a polygon mouseover event occurs i display a custom div near the mouse position
Hope it helps

Answer 3

This code works for me:
googleShape - is your polygon or circle or rectangle.
titleText - message you need to post on hover of shapes.
google.maps.event.addListener(googleshape, 'mouseover', function() {
this.map.getDiv().setAttribute('title', "`titleText`");
});
google.maps.event.addListener(googleshape, 'mouseout', function() {
this.map.getDiv().removeAttribute('title');
});

Answer 4

You could try the following
//Add a listener for the click event
google.maps.event.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow;
then when the click event happens call the following function
function showArrays(event) {
var contentString = 'Content here';
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}

Answer 5

A nice solution will be to use Google's built in InfoWindow as a tooltip/popup container. Then listen to mouseover and mouseout to show/hide the tooltip.
Notice that by using InfoWindow you can also put HTML markup as the content of the tooltip and not only plain text.
const mapHandler: google.maps.Map = ... // your code here
const polygon: google.maps.Polygon = ... // your colde here
const popUp = new google.maps.InfoWindow({
content: "<span style='color:red'> SOME MESSAGE </span>" // red message
});
polygon.addListener("mouseover", (event) => {
popUp.setPosition(event.latLng);
popUp.open(mapHandler);
});
polygon.addListener("mouseout", (event) => {
popUp.close()
});