google maps api 3 - geoxml3 kml polygon tooltip on mouseover instead of click -


i need working example or solution hovering kml polygon , showing info balloon - instead of doing on click. doable?

for example, on map, instead of showing info balloon on click, doing on mouse over:

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

obs.: kml file has additional info inside placemark => extendeddata (if helps in way).

tks :)

here example uses infobubble "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 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 doc object   geoxmldoc = doc;   (var = 0; < 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


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -