Search code examples
google-mapsgoogle-maps-api-3geoxml3

How to change color polygon(kml+geoXml)?


I show KML map on my site with help geoXml3. There are polygons and markers. But when I want to do something with polygons on click him, nothing happens. I want to change color pressed polygon and change color siblings polygons. Can help me? It is my code:

function initialize(){
    myLatLng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {
        center: {lat: 55.864237, lng: -4.251806},
        zoom: 12,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    map = new google.maps.Map(document.getElementById("map"), myOptions);

    geoXml = new geoXML3.parser({
        map: map,
        singleInfoWindow: true,
        afterParse: myfunction
    });
    geoXml.parse('http://165.227.72.239/wp-content/uploads/2016/09/glasgow.kml');
}

function myfunction(doc){

    google.maps.event.addListener(doc,"click",function() {
        console.log('gdf');
        for (var i=0;i<doc.gpolygons.length;i++)
            doc.gpolygons[i].setOptions({strokeColor: "#000"});
    });
}
initialize();

Solution

  • I believe I have a solution.

    In addition, I will give a plug to my GeoXML3 example on Github

    var geoXml;
    
    function initialize() {
        myLatLng = new google.maps.LatLng(-34.397, 150.644);
    
        var myOptions = {
            center: {lat: 55.864237, lng: -4.251806},
            zoom: 12,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
    
        map = new google.maps.Map(document.getElementById("map"), myOptions);
    
        geoXml = new geoXML3.parser({
            map: map,
            singleInfoWindow: true,
            afterParse: myfunction
        });
        geoXml.parse('http://165.227.72.239/wp-ontent/uploads/2016/09/glasgow.kml');
    }
    
    function myfunction(doc){
        // doc coming in is an array of objects from GeoXML3, one per KML.  Since there's only 1, 
        // we'll assumpe 0 is our target and we wnant gpolygons, an array of Google Maps Polygon instances
        var polygons = doc[0].gpolygons;
    
        for (polygonindex = 0, loopend = polygons.length; polygonindex < loopend; polygonindex++) {
            google.maps.event.addListener(polygons[polygonindex], "click", function() {
                console.log('gdf');
                this.setOptions({strokeColor: "#000"});
            });
        }
    }
    initialize();