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>
Comments
Post a Comment