[SOLVED] geoxml3 kml polygon tooltip on mouseover instead of click

geoxml3 kml polygon tooltip on mouseover instead of click

I need an working example or a solution for hovering a kml polygon and showing the info balloon - instead of doing it on click. Is it doable?

For example, on this map, instead of showing the info balloon on click, doing it on mouse over:

http://www.geocodezip.com/geoxml3_test/geoxml3_test_polygon.html

Obs.: my kml file has additional info inside Placemark => ExtendedData (if that helps in any way).

tks :)

Solution

Here is an example that uses InfoBubble for the "tooltip" (only handles polygons):

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>geoxml3 example with polygon mouseover text</title>
<style>
  html{height:100%;}
  body{height:100%;margin:0px;font-family: Helvetica,Arial;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>

<script type="text/javascript">
var geoXmlDoc = null;
var map = null;
jQuery(document).ready(function () {
  var myOptions = {
        center: new google.maps.LatLng(-19.5968657,-40.7717683),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var geoXml = new geoXML3.parser({
        map: map,
        singleInfoWindow: true,
        afterParse: useTheData
      });
  geoXml.parse('SO_unicef_test.kml');
});
function useTheData(doc) {
  // Geodata handling goes here, using JSON properties of the doc object
  geoXmlDoc = doc;
  for (var i = 0; i < doc[0].placemarks.length; i++) {
    var placemark = doc[0].placemarks[i];
    polygonMouseover(placemark.polygon,placemark.name);
    jQuery('#map_text').append(doc[0].placemarks[i].name + ', ');
  }
};
var ib = new InfoBubble({
          shadowStyle: 0,
          padding: 0,
          backgroundColor: 'white',
          borderRadius: 4,
          arrowSize: 0,
          borderWidth: 1,
          borderColor: 'black',
          disableAutoPan: true,
          hideCloseButton: true,
          arrowPosition: 50,
          arrowStyle: 0
        });
function polygonMouseover(poly, text) {
  google.maps.event.addListener(poly,'mouseover', function(evt) {
    ib.setContent(text);
    ib.setPosition(evt.latLng);
    ib.setMap(map);
    ib.open()
  });
  google.maps.event.addListener(poly,'mouseout', function(evt) {
    ib.close()
  });
}
</script>
</head>
<body >
<form id="form1">

<div id="map_canvas" style="width:600px;height:500px;"></div>

<div id="map_text"></div>
</form>

</body>
</html>

working example