I want to parse a simple marker from a KML so i have been making some tests with geoxml3, everything goes perfect if I use (import) the 'polys/geoxml3.js' library, but if I change it to 'kmz/geoxml3.js' (because later I want to use some extendedData) I get this error 'Cannot read property 'setAnimation' of undefined' . How can I solve it but using the 'kmz/geoxml3.js' library?
<!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</title>
<style>
html{height:100%;}
body{height:100%;margin:0px;}
#map_canvas{height: 90%;width: 90%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map_canvas"></div>
</div>
<script type="text/javascript">
var geoXml=null, map=null;
var infowindow = new google.maps.InfoWindow({});
function initialize() {
var myOptions = {
center: new google.maps.LatLng(39.397, -100.644),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geoXml = new geoXML3.parser({
map: map,
zoom: true,
createMarker: addMyMarker,
singleInfoWindow: true,
suppressInfoWindows: true
});
geoXml.parse('exampleMarker.kml');
function addMyMarker(placemark,doc) {
var marker = geoXml.createMarker(placemark);
marker.setAnimation(google.maps.Animation.BOUNCE);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(placemark.description);
infowindow.open(map,marker);
});
doc.markers.push(marker);
return marker;
};
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
My KML file is:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Document>
<name>Chicago Bike Parking</name>
<description>A map of 20 bike parking.</description>
<Style id='bikeParkingIcon'>
<IconStyle>
<color>ffffffff</color>
<colorMode>normal</colorMode>
<scale>1.0</scale>
<Icon id='bikeParking'>
<href>icono.png
</href>
</Icon>
</IconStyle>
</Style>
<Placemark>
<name>2024 S Western</name>
<address>2024 S Western Ave, Chicago, IL 60608</address>
<phoneNumber></phoneNumber>
<description>1 bike rack installed here. <a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'>More info</a>.</description>
<visibility>1</visibility>
<styleUrl>#bikeParkingIcon</styleUrl>
<Point>
<coordinates>-87.685871,41.854533,1000</coordinates>
</Point>
<TimeStamp><when>2009-07-24</when>
</TimeStamp>
<ExtendedData xmlns:cdot="http://www.chicagobikes.org/data">
<cdot:locName>Salvation Army</cdot:locName>
<exampleTag>My data</exampleTag>
</ExtendedData>
</Placemark>
</Document>
</kml>
So far this is my solution using a 'custom' createMarker function, this way you can use and define your own marker properties/options.