Magnus Schmidt Magnus Schmidt - 22 days ago 13
Javascript Question

Drawing multiple Polygons on Google Maps API V3 from XML File

I actual draw a map with multiple marker which are parsed from an XML File. Addionally I draw two Polyglons on my map. The Coords are hard-coded in the script and I want to load the polyglon coords from an XML-File as well. Here is my actual Code:

<script type="text/javascript">

var customIcons = {
warning: {
icon: 'https://scoo.me/img/marker_warning.png'
},
activate: {
icon: 'https://scoo.me/img/marker_activate.png'
}
};

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
scrollwheel: false,
mapTypeId: 'roadmap',
mapTypeControl: false
});

var infoWindow = new google.maps.InfoWindow;
downloadUrl("../xml/vehicles_service_required.php", function(data) {';
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var VehicleID = markers[i].getAttribute("VehicleID");
var VehicleLabel = markers[i].getAttribute("VehicleLabel");
var ServiceRequired = markers[i].getAttribute("ServiceRequired");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(point);
var html = "<b>Roller-Nr. " + VehicleLabel + "</b> <br/>(ID-" + VehicleID + ")";
var icon = 'https://scoo.me/img/marker_activate.png';
//var icon = {};
if (ServiceRequired == "0") {
icon = 'https://scoo.me/img/marker_warning.png';
} else if (ServiceRequired == "-1") {
icon = 'https://scoo.me/img/marker_activate.png';
}

var marker = new google.maps.Marker({
map: map,
position: point,
//icon: 'https://scoo.me/img/marker_warning.png'
icon: icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
map.fitBounds(bounds);

// Polyglon Munich

var muenchen = new google.maps.Polygon({
paths: [
new google.maps.LatLng(48.163108,11.588816),
new google.maps.LatLng(48.169462,11.595339),
new google.maps.LatLng(48.173069,11.599073),
new google.maps.LatLng(48.176016,11.592807),
new google.maps.LatLng(48.182455,11.599373)],
strokeColor: '#21a9e1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#21a9e1',
fillOpacity: 0.2,
map: map
});

// Geschäftsgebiet Cologne
var koeln = new google.maps.Polygon({
paths: [
new google.maps.LatLng(50.9558045,6.9741296),
new google.maps.LatLng(50.9567777,6.9755029),
new google.maps.LatLng(50.9579266,6.9736361),
new google.maps.LatLng(50.9574265,6.9724559),
new google.maps.LatLng(50.9596701,6.9679069),
new google.maps.LatLng(50.9600215,6.9656538)],
strokeColor: '#21a9e1',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#21a9e1',
fillOpacity: 0.2,
map: map
});
});
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {}

</script>


And my XML for Polgon is looking like:

<subdivisions>
<subdivision Name="Muenchen">
<coord lat="48.163108" lng="11.588816"/>
<coord lat="48.169462" lng="11.595339"/>
<coord lat="48.173069" lng="11.599073"/>
<coord lat="48.176016" lng="11.592807"/>
<coord lat="48.182455" lng="11.599373"/>
</subdivision>
<subdivision Name="Koeln">
<coord lat="50.9558045" lng="6.9741296"/>
<coord lat="50.9567777" lng="6.9755029"/>
<coord lat="50.9579266" lng="6.9736361"/>
<coord lat="50.9574265" lng="6.9724559"/>
<coord lat="50.9596701" lng="6.9679069"/>
<coord lat="50.9600215" lng="6.9656538"/>
<coord lat="50.9627245" lng="6.9615983"/>
<coord lat="50.9651706" lng="6.9538736"/>
<coord lat="50.9664139" lng="6.9517493"/>
</subdivision>
</subdivisions>


Can anybody please give me an example how to implement the XML for polyglone in my script. Thank you in advance!

Answer

Here is the code that builds lists of lat-lng objects, and saves result as latlnglists.

var DOMParser = new DOMParser();
var xmltext = `
<subdivisions>
    <subdivision Name="Muenchen">
        <coord lat="48.163108" lng="11.588816"/>
        <coord lat="48.169462" lng="11.595339"/>
        <coord lat="48.173069" lng="11.599073"/>
        <coord lat="48.176016" lng="11.592807"/>
        <coord lat="48.182455" lng="11.599373"/>
    </subdivision>
    <subdivision Name="Koeln">
        <coord lat="50.9558045" lng="6.9741296"/>
        <coord lat="50.9567777" lng="6.9755029"/>
        <coord lat="50.9579266" lng="6.9736361"/>
        <coord lat="50.9574265" lng="6.9724559"/>
        <coord lat="50.9596701" lng="6.9679069"/>
        <coord lat="50.9600215" lng="6.9656538"/>
        <coord lat="50.9627245" lng="6.9615983"/>
        <coord lat="50.9651706" lng="6.9538736"/>
        <coord lat="50.9664139" lng="6.9517493"/>
    </subdivision>
</subdivisions>`;
var doc = DOMParser.parseFromString( xmltext, "application/xml" );
var docElem = doc.documentElement;
var subdiv = docElem.getElementsByTagName('subdivision');

var latlnglists = []; //for lists of lat-lng objs

for (var i = 0; i < subdiv.length; i++) {
    var name = subdiv[i].getAttribute("Name");
    //console.log(name);
    var coord = subdiv[i].getElementsByTagName('coord');

    var latlngs = [];
    for (var k = 0; k < coord.length; k++) {
        var lat = coord[k].getAttribute("lat");
        var lng = coord[k].getAttribute("lng");
        //console.log("lat, lng: " + lat + ", " + lng);
        latlngs.push({lat: lat, lng: lng});
    }
    latlnglists.push(latlngs);
}

This part uses latlnglists[i], where i=(0,1), as paths value to build polygons.

var muenchen = new google.maps.Polygon({
            paths: latlnglists[0],
            strokeColor: '#21a9e1',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#21a9e1',
            fillOpacity: 0.2,
            map: map
        });
var koeln = new google.maps.Polygon({
            paths: latlnglists[1],
            strokeColor: '#21a9e1',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#21a9e1',
            fillOpacity: 0.2,
            map: map
});

EDIT

To adapt my code into yours, follow these steps:

  1. Delete code for both the polygons (var muenchen + var koeln). It will be replaced with my code.
  2. Change the 2nd statement of my code to var xmltext = data.responseText;
  3. Replace the deleted code with all my code.