Info-bulle sur un polygone dans Google Maps

Question

J'ai des polygones pour différentes régions et états dans mon application. Les marqueurs implémentent l'info-bulle en prenant l'attribut title. Sur mouseover et mouseout sur un polygone, des événements peuvent être déclenchés. Comment puis-je créer une info-bulle qui ressemble à l'info-bulle implémentée pour un marqueur.

Édition-1: Ajout du code utilisé pour créer le polygone et joindre les gestionnaires pour afficher/masquer les info-bulles.

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

Je pense que vous aurez à faire yourself.In une page que j'ai implémenté i attachais un événement de déplacement de la souris sur la page afin que je puisse enregistrer le position.Then de la souris lors d'un événement mouseover polygone se produit i afficher une sur mesure div près de la position de la souris

Hope it helps

Answer 2

Vous pouvez essayer la

suivante

//Add a listener for the click event 
google.maps.event.addListener('click', showArrays); 
infoWindow = new google.maps.InfoWindow; 

puis quand l'événement click se produit, appelez la fonction suivante

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 3

Il y a en fait une astuce pour contourner ce (étrange) limitation dans Google Maps. Lorsque vous déplacez votre souris sur un élément de données, vous pouvez simplement ajouter une info-bulle au <div> de la carte. Il sera ajouté à l'endroit où votre pointeur de la souris est actuellement - juste au-dessus de l'élément!

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'); 
}