Geoxml3 CreatePolygon function

Question

Geoxml3 CreatePolygon function

1.2k Views Asked by cholu1217 At 19 April 2025 at 06:52

I am trying to know how to use the createPolygon function in the parser options.

This is my index file but it gives me this error: Cannot read property 'bounds' of undefined.

<!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 src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>

</head>
<body>
<div id="map_canvas"></div>

<script type="text/javascript">
var geoXml="", map="";
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,
        createPolygon: addMyPolygon,
        singleInfoWindow: true,
        suppressInfoWindows: true
    });

    geoXml.parse('testPolygon.xml');

    function addMyMarker(placemark) {
        var marker = geoXml.createMarker(placemark);
            //marker.setAnimation(google.maps.Animation.BOUNCE);
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(placemark.description);   
                infowindow.setPosition(marker.getPosition());
                infowindow.open(map,marker);
            });
        };

        function addMyPolygon(placemark) {
            var polygon = geoXml.createPolygon(placemark);
            google.maps.event.addListener(polygon, 'click', function() {
                infowindow.setContent(placemark.description);   
                var lat = event.latLng.lat();
                var lng = event.latLng.lng();
                var myLatlng = new google.maps.LatLng(lat,lng);
                infowindow.setPosition(myLatlng);
                infowindow.open(map,polygon);
            });
        };

    };
    google.maps.event.addDomListener(window, 'load', initialize);

</script>
</body>
</html>

I want to know if is correct the way I'm using the 'createPolygon:addMyPolygon' function, or where is the issue, I mean how can I set a click Listener for each polygon using the createPolygon function. I did it with the createMarker function for a KML with markers, but in the file above the createPolygon doesn't parse my KML file.

My KML/XML file is: http://www.geocodezip.com/geoxml3_test/testPolygon.xml

Original Q&A

There are 1 best solutions below

**geocodezip** · Accepted Answer

The createPolygon function needs to return the resulting polygon to GeoXml3 so it can manage it.

function addMyPolygon(placemark) {
    var polygon = geoXml.createPolygon(placemark);
    google.maps.event.addListener(polygon, 'click', function(event) {
        var myLatlng = event.latLng;
        infowindow.setContent("<b>"+placemark.name+"</b><br>"+placemark.description+"<br>"+event.latLng.toUrlValue(6));   
        infowindow.setPosition(myLatlng);
        infowindow.open(map);
    });
    return polygon;
};

Also, if you are going to use event inside the polygon 'click' listener it needs to be defined.

working example

Geoxml3 CreatePolygon function

There are 1 best solutions below

Related Questions in GOOGLE-MAPS-API-3

Related Questions in GEOXML3

Trending Questions

Popular # Hahtags

Popular Questions