Access KML Markers in Google Maps -
is there way create "sidebar" kml file when using google maps api?
i'm loading markers on map using this:
var mymarkerlayer = new google.maps.kmllayer('http://example.com/westcoast.kml'); this works great far, how can grab data , loop through points?
i avoid using third party library, if possible- although jquery ok.
kml xml document can process using jquery extract data need. can store coordinates , placenames in local array , use data purpose want eg. can use navigate point on map when person clicks on place name on sidebar.
below example on how process kml file , implement navigation based on data in file..one word of caution not large kml files doubles load time (browser has load file process features)...
<script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false"> </script> <script src="../js/jquery-1.4.2.min.js"> </script> <script> var map; var nav = []; $(document).ready(function(){ //initialise map init(); $.get("kml.xml", function(data){ html = ""; //loop through placemarks tags $(data).find("placemark").each(function(index, value){ //get coordinates , place name coords = $(this).find("coordinates").text(); place = $(this).find("name").text(); //store json c = coords.split(",") nav.push({ "place": place, "lat": c[0], "lng": c[1] }) //output navigation html += "<li>" + place + "</li>"; }) //output navigation $(".navigation").append(html); //bind clicks on navigation scroll placemark $(".navigation li").bind("click", function(){ pantopoint = new google.maps.latlng(nav[$(this).index()].lng, nav[$(this).index()].lat) map.panto(pantopoint); }) }); function init(){ var latlng = new google.maps.latlng(-43.552965, 172.47315); var myoptions = { zoom: 10, center: latlng, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map"), myoptions); } }) </script> <html> <body> <div id="map" style="width:600px;height: 600px;"> </div> <ul class="navigation"> </ul> </body> </html>
Comments
Post a Comment