javascriptgoogle-mapsgoogle-maps-api-3kmlgeoxml3

Clicking a polygon using Google Maps API 3 - Need to change to MouseOver (Geoxmlv3 & KML Layer)


I have a Google Maps (API 3) running a custom KML (geoxml3) with polygons containing titles and descriptions.

It all works fine, however I need to change the polygon click which reveals the infowindow to work on hover instead. It is easy enough to create a mouseover listener which runs the click function, however I need the click to run another function, so the click function would get overwritten using this method.

How can I find/copy the code that runs for the polygon click function and apply it to onmouseover instead? Is this possible?

Update: I found this section in the geoxmlv3.js file:

google.maps.event.addListener(gObj, 'click', function (e) {

    var iW = this.infoWindow;
    iW.close();
    iW.setOptions(this.infoWindowOptions);

    if (e && e.latLng) iW.setPosition(e.latLng);

    else if (this.bounds) iW.setPosition(this.bounds.getCenter());

    iW.setContent("<div id='geoxml3_infowindow'>" + iW.getContent() + "</div>");

    google.maps.event.addListenerOnce(iW, "domready", function () {

        var node = document.getElementById('geoxml3_infowindow');
        var imgArray = node.getElementsByTagName('img');

        for (var i = 0; i < imgArray.length; i++) {

            var imgUrlIE = imgArray[i].getAttribute("src");
            var imgUrl = cleanURL(doc.baseDir, imgUrlIE);

            if (kmzMetaData[imgUrl]) {
                imgArray[i].src = kmzMetaData[imgUrl].dataUrl;
            } else if (kmzMetaData[imgUrlIE]) {
                imgArray[i].src = kmzMetaData[imgUrlIE].dataUrl;
            }
        }
    });

    iW.open(this.map, this.bounds ? null : this);
});

I have tried changing the 'click' event to 'mouseover' but that causes no mouseover or click to work


Solution

  • Here's the solution (after much trial and error!)

    google.maps.event.addListener(poly,"mouseover",function(e) {
    
      var iW = this.infoWindow;
      iW.close();
      iW.setOptions(this.infoWindowOptions);
    
      if      (e && e.latLng) iW.setPosition(e.latLng);
      else if (this.bounds)   iW.setPosition(this.bounds.getCenter());
    
      iW.setContent("<div id='geoxml3_infowindow'>"+iW.getContent()+"</div>");
    
      iW.open(this.map, this.bounds ? null : this);
    });
    

    Then just change your click function to something else. Remember to also set your mouseout function to close the infowindow too