javascript - How to Change color of KML polygon on mouse click -
i have kml file lots of polygon drawn , want change color of polygon on mouse click looking polygon selected.
problem: loaded kml file not able polygon can implemented click listener.
you can use afterparse attribute give callback , assign event handler there
<body onload="initialize()"> <div id="map_canvas" ></div> </body> <script> function initialize(){ mylatlng = new google.maps.latlng(-34.397, 150.644); var myoptions = { zoom: 18, center: new google.maps.latlng(-34.397, 150.644), // zoom: 5, // center: mylatlng, maptypeid: google.maps.maptypeid.hybrid }; map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); geoxml = new geoxml3.parser({ map: map, singleinfowindow: true, afterparse: myfunction }); geoxml.parse('bs-stadium.kml'); } function myfunction(doc) { google.maps.event.addlistener(doc,"mouseover",function() { (var i=0;i<doc.gpolylines.length;i++) doc.gpolylines[i].setoptions({strokecolor: "#ffff00"}); }); google.maps.event.addlistener(doc,"mouseout",function() { (var i=0;i<doc.gpolylines.length;i++) doc.gpolylines[i].setoptions({strokecolor: "#00ffff"}); }); } </script> update: try code below tested , working edit wherever necessary
for kml make file name demo.kml
<?xml version="1.0" encoding="utf-8"?> <kml xmlns="http://www.opengis.net/kml/2.2"> <document> <name>tennis-lines</name> <open>1</open> <placemark> <name>outside</name> <linestring> <coordinates> -122.43193945401,37.801983684521 -122.431564131101,37.8020327731402 -122.431499536494,37.801715236748 -122.43187136387,37.8016634915437 -122.43193945401,37.801983684521 </coordinates> </linestring> </placemark> <placemark> <name>west</name> <linestring> <coordinates> -122.431885303019,37.8019316061803 -122.431762847554,37.8019476932246 -122.431719843168,37.8017374462006 -122.431841863906,37.8017213314352 -122.431885303019,37.8019316061803 </coordinates> </linestring> </placemark> <placemark> <name>east</name> <linestring> <coordinates> -122.431714248439,37.8019544341044 -122.431592404659,37.8019694509363 -122.431548777661,37.8017591041777 -122.431671453253,37.8017428443014 -122.431714248439,37.8019544341044 </coordinates> </linestring> </placemark> now html file
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title></title> <style type="text/css"> html, body, #map_canvas { width: 300px; height: 300px; margin: 0; padding: 0; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script> <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> <script type="text/javascript"> var geoxml = null; var map = null; var mylatlng = null; function initialize() { mylatlng = new google.maps.latlng(37.422104808,-122.0838851); var myoptions = { zoom: 18, center: new google.maps.latlng(37.422104808,-122.0838851), // zoom: 5, // center: mylatlng, maptypeid: google.maps.maptypeid.hybrid }; map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); geoxml = new geoxml3.parser({ map: map, singleinfowindow: true, afterparse: usethedata }); geoxml.parse('demo.kml'); }; function highlightpoly(poly) { poly.setoptions({strokecolor: "#0000ff"}); google.maps.event.addlistener(poly,"mouseover",function() { poly.setoptions({strokecolor: "#ee0000"}); }); google.maps.event.addlistener(poly,"mouseout",function() { poly.setoptions({strokecolor: "#00ee00"}); }); } function usethedata(doc){ geoxmldoc = doc[0]; (var = 0; < doc[0].gpolylines.length; i++) { highlightpoly(doc[0].gpolylines[i]); } }; </script> </head> <body onload="initialize()"> <div id="map_canvas"> </div> <div id="map_text"> </div> </body> </html> couldn't post fiddle due origin policy .hopefully helps.
Comments
Post a Comment