Is there any way to create a "sidebar" from a KML file when using the Google Maps API?
I'm loading the markers on the map using something like this:
var myMarkerLayer = new google.maps.KmlLayer('http://example.com/WestCoast.kml');
This works great so far, but how can I grab that data and loop through the points?
I would like to avoid using a third party library, if possible- although jQuery is OK.
This isn't possible. Check the docs: http://code.google.com/apis/maps/documentation/javascript/overlays.html#KMLLayers
Under "KML Feature Data":
Because KML may include a large number of features, you may not access feature data from the KmlLayer object directly. Instead, as features are displayed, they are rendered to look like clickable Maps API overlays.
KML is just an XML document so you can just process it using jQuery to extract the data you need. You can store the coordinates and placenames in a local array and use this data for any purpose you want eg. you can use it to navigate to a point on the map when a person clicks on a place name on a sidebar.
Below is an example on how to process the KML file and implement the navigation based on the data in the file..One word of caution I would not do this with large KML files as it doubles the load time (browser has to load the file to process the 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 a map
init();
$.get("kml.xml", function(data){
html = "";
//loop through placemarks tags
$(data).find("Placemark").each(function(index, value){
//get coordinates and place name
coords = $(this).find("coordinates").text();
place = $(this).find("name").text();
//store as JSON
c = coords.split(",")
nav.push({
"place": place,
"lat": c[0],
"lng": c[1]
})
//output as a navigation
html += "<li>" + place + "</li>";
})
//output as a navigation
$(".navigation").append(html);
//bind clicks on your navigation to scroll to a 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>