Geoxml3 issue (kmz library)

Question

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. &lt;a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'&gt;More info&lt;/a&gt;.</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>

[i get an error.](http://meta.stackoverflow.com/questions/296603/how-to-educate-people-to-include-complete-error-messages), what error? — geocodezip, Jun 11 '15 at 03:39
I get this error 'Cannot read property 'setAnimation' of undefined' . But IF i change (import) the 'polys/geoxml3.js' library everything goes perfect ! How can i solve it but using the 'kmz/geoxml3.js' library ! Thanks — cholu1217, Jun 11 '15 at 15:41
Please update your question to include that information. This is a known issue with the kmz branch ([issue 66](https://code.google.com/p/geoxml3/issues/detail?id=66)). The code needs to determine the size of the icon which is an asynchronous operation. Is there a reason you can't use the builtin createMarker function? — geocodezip, Jun 11 '15 at 15:46
You mean not to use the createmarker function? like creating the markers in the afterParse function? — cholu1217, Jun 11 '15 at 15:55
My suggestion was to remove the "custom" createMarker function and let geoxml3 use the built in one. You might be able to solve the problem by copying the guts of the built in function into your custom function rather than calling it. Post processing the placemarks in the afterParse function might work also. — geocodezip, Jun 11 '15 at 16:41
I wanted to be able to use the custom createMarker function, I ve tried the afterParse function and it worked fine! I suppose i'll keep with that ...Thanks again for your help ;) ! — cholu1217, Jun 11 '15 at 17:06
Please post your working code as an answer and accept it. If I figure out how to address this issue in the kmz branch of geoxml3, I can provide updates. — geocodezip, Jun 11 '15 at 18:32
Sure. I've posted my solution, as i said is working so far. I want to be able to push the marker in the docs.markers (Could you please take a look at this?). Thanks geocodezip — cholu1217, Jun 12 '15 at 02:42

score 0 · Answer 1 · answered Jun 12 '15 at 02:40

So far this is my solution using a 'custom' createMarker function, this way you can use and define your own marker properties/options.

geoXml = new geoXML3.parser({
        map: map,
        zoom: true,
        createMarker: addMyMarker,
        singleInfoWindow: true,
        suppressInfoWindows: true,
        afterParse: useTheData
    });

    geoXml.parse('exampleMarker.kml');

    function addMyMarker(placemark,doc) {
        var marker = new google.maps.Marker({
            title: placemark.name,
            position: placemark.latlng,
            map: map,
            //This case href is the tag in my KML
            icon: placemark.style.icon.href
        });

        google.maps.event.addListener(marker, 'click', function() {
            marker.setAnimation(google.maps.Animation.BOUNCE);
            infowindow.setContent(placemark.description);
            infowindow.open(map,marker);
        });
        //doc.markers.push(marker);
        return marker;
    };
    function useTheData(doc){
        $.each(doc[0].placemarks, function(index, value) {
            //Something
        });
    };

score 0 · Answer 2 · answered Nov 28 '18 at 02:42

in your description tag i noticed have an html anchor tag but is not being read as html

<description>1 bike rack installed here. &lt;a href='http://www.chicagobikes.org/bikeparking/rackinfo.php?id=2' title='More info about this Bike Rack location'&gt;More info&lt;/a&gt;.</description>

you can encapsulate it inside so it should look like this

<description><![CDATA[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>

Geoxml3 issue (kmz library)

2 Answers2