Hover over polygons (showing text)

Question

I made a few Polygons on a Google map. Now I want to add a mouseover (and mouseout) to the Polygons, so that when you hover over the Polygon, you get to see the name of the area. and when you mouseout the names goes away (like when you hover over buttons in your browser)

var map;
var infoWindow;

function initialize() {
    var myLatLng = new google.maps.LatLng(50.88111111111, 3.889444444444);
    var myOptions = {
        zoom: 12,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

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

    var polyCoords = [
        verwissel(3.869506,50.906449),
        verwissel(3.869654,50.905664),
        verwissel(3.869934,50.904131),
        verwissel(3.870310,50.902717),
        verwissel(3.870471,50.901559),
    ];

    poly = new google.maps.Polygon({
        paths: HerzeleCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });

    google.maps.event.addListener(Poly, "mouseover", function(showtext("polyname"));
google.maps.event.addListener(Poly, "mouseover", function(do not show text anymore);

This is what I think it would look like, but I dont know how it works.

Answer 1

Here's an example: http://jsfiddle.net/tcfwH/304/

Not exactly the same as a browser tooltip, but the text can be styled. I'm using MarkerWithLabel. Each marker is used for the name of its polygon. To toggle multi-line boxes change white-space: nowrap in the CSS. There is also InfoBox as a working option but I find it much more complicated to use than MarkerWithLabel.

The event listeners move the MarkerWithLabel around according to the mouse position:

  google.maps.event.addListener(poly, "mousemove", function(event) {
    marker.setPosition(event.latLng);
    marker.setVisible(true);
  });
  google.maps.event.addListener(poly, "mouseout", function(event) {
    marker.setVisible(false);
  });