Adding markers on a google map from an xml file in javascript

Question

I'm trying to display some markers on a google map from an xml file that looks like this :

<pdv id="69330005" latitude="4578181.32121" longitude="500540.118325" cp="69330" pop="R">
<adresse>80 Rue Joseph Desbois</adresse>
<ville>MEYZIEU</ville>
<ouverture debut="01:00" fin="01:00" saufjour=""/>
<services>
  <service>Station de lavage</service>
  <service>Vente de gaz domestique</service>
  <service>Automate CB</service>
</services>
<prix nom="Gazole" id="1" maj="2017-04-07 12:56:14" valeur="1.216"/>
<prix nom="SP95" id="2" maj="2017-04-07 12:56:15" valeur="1.379"/>
<prix nom="SP98" id="6" maj="2017-04-07 12:56:15" valeur="1.439"/>
</pdv>

So I created this function to parse this and get lat/lng (It works) :

  <script>

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        parseXml(this);
    }
};
xhttp.open("GET", "PrixCarburants_instantane.xml", true);
xhttp.send();


function parseXml(xml) {
    var xmlDoc = xml.responseXML;
    var elementPDV = xmlDoc.getElementsByTagName("pdv");
    var p1 = new google.maps.LatLng(46, 1);
    var p2;


    var distance; 

    for(i = 0; i < elementPDV.length;i++)
    {

        p2 = new google.maps.LatLng(elementPDV[i].getAttributeNode("latitude").nodeValue / 100000, elementPDV[i].getAttributeNode("longitude").nodeValue / 100000 );
        distance = google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000; //distance between p1 and p2 in kilometers
        information = elementPDV[i].getAttributeNode("cp").nodeValue;
        if (distance < 20) {
  // I wanna display markers on p2 lat/lng only if they are at a maximum distance of 20km

        }
    }





}

And I have this to display the google Map and markers:

    function initialize() {
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(46,1),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    }

    function createMarker(information, p2) {
        var marker = new google.maps.Marker({
            position: p2,
            map: map
        });
        google.maps.event.addListener(marker, "click", function () {
            if (infowindow) infowindow.close();
            infowindow = new google.maps.InfoWindow({ content: information });
            infowindow.open(map, marker);
        });
        return marker;
    }

And some html :

<body onload="initialize()" >
<div id="map_canvas"></div>
</body>

So what I would like to do is to merge this, to display only the markers from the xml file that are at a maximum distance of 20km from the map center (46,1), however I am a bit lost with all the local variables, and what should I put in parameters.

john Smith · Accepted Answer · 2017-04-14 09:25:40Z

I Transformed your code to an object called "myglobalObject", the map is stored to the property "map" so you always have access to it after its initialized with myglobalObject.map

myglobalObject = {
    map:false,
    initializeMap: function(){
        mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(46,1),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        myglobalObject.map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        myglobalObject.loadMarkers();
    },
    createMarker: function(information, p2){
        marker = new google.maps.Marker({
            position: p2,
            map: myglobalObject.map
        });
        google.maps.event.addListener(marker, "click", function () {
            if (infowindow) infowindow.close();
            infowindow = new google.maps.InfoWindow({ content: information });
            infowindow.open(myglobalObject.map, marker);
        });
        return marker;
    },
    loadMarkers: function() {
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                myglobalObject.parseXml(this);
            }
        };
        xhttp.open("GET", "PrixCarburants_instantane.xml", true);
        xhttp.send();
    },
    parseXml: function(xml){
        xmlDoc = xml.responseXML;
        elementPDV = xmlDoc.getElementsByTagName("pdv");
        p1 = new google.maps.LatLng(46, 1);
        p2;
        distance; 
        for(i = 0; i < elementPDV.length;i++)
        {
            p2 = new google.maps.LatLng(elementPDV[i].getAttributeNode("latitude").nodeValue / 100000, elementPDV[i].getAttributeNode("longitude").nodeValue / 100000 );
            distance = google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000; //distance between p1 and p2 in kilometers
            information = elementPDV[i].getAttributeNode("cp").nodeValue;
            if (distance < 20) {
                myglobalObject.createMarker(information, p2)
            }
        }
    }
}



/* After the object is defined you can run the inititialize function which will initialize the map and load and place the markers, just follow the code */


myglobalObject.initializeMap();

hope it helps understanding why object-orientated style is the way to go!

Collectives™ on Stack Overflow

Adding markers on a google map from an xml file in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related