CODEWITHSUNDEEP
javascriptxmlgoogle-mapsgoogle-maps-api-3
David Faizulaev
David Faizulaev

Reputation: 5721

Creating markers from external xml file

I am a newbie in Google Maps API.

I have a XML file that contains the following:

              <?xml version="1.0"?>
              -<Customers>-
              <Marker category="Production">
              <title lang="en">Invensys</title>
              <site_location>Neponset Avenue 22, Foxborough, Foxboro, MA, United States</site_location> 

              <cordinantes>42.066817,-71.24814</cordinantes>
              <site_status>Normal</site_status>
     </Marker>
          <Marker category="Production"><title lang="en">Yokogawa Japan</title> 
             <site_location>Shinjuku, Tokyo,Japan</site_location>
             <cordinantes>36.543915,136.629281</cordinantes>             
             <site_status>Critical</site_status>
             </Marker>
             </Customers>

And this is the JS file containing the function that reads the XML file and enters the data into an array, file is called func.js.

<script src="jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>


    var markers = [];

  $.get('Customers.xml', function(xml) {
  var jsonObj = $.xml2json(xml);
    $.each(jsonObj.Marker, function(){
        var stat = this.site_status == "Critical" ? "redgoogle.png" : "green_marker.png";
        var latlng = new google.maps.LatLng (this.cordinantes);
             var mark = {
                    title:  this.title,
                    location: this.site_location,
                    cord: latlng,
                    icon: stat
                    }
            markers.push(mark);
    });
debugger;
});

And this HTML file that contains the map & should generate two markers according to the content of the "markers" array.

 <!DOCTYPE html>
 <html>
  <head>
  <title>Simple Map</title>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <style>
     html, body, #map-canvas {
     height: 100%;
     margin: 0px;
     padding: 0px
   }
   </style>
<script src="jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type='text/javascript' src='func.js'></script>
<script>
 markers;   
  var map;
 function initialize() {
  var mapOptions = {
   zoom: 3,
    center: new google.maps.LatLng(32.637929,-16.934395),
   mapTypeId: google.maps.MapTypeId.ROADMAP
 };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
}
       google.maps.event.addDomListener(window, 'load', initialize);
</script>
 </head>
 <body>
   <div id="map-canvas"></div>
   </body>
 </html>

I need assistance in using the data inside the "markers" array in order to generate markets. How can I use the markers array in order to do that ?

Thanks in advance.

Upvotes: 0

Views: 699

Answers (2)

RGS
RGS

Reputation: 5211

XML File: Cities.xml

<Cities>
    <CityName>
      <id>1</id>
      <name>A</name>
      <latitude>40.978989</latitude>
      <longitude>-81.488095</longitude>
    </CityName>
    <CityName>
      <id>2</id>
      <name>B</name>
      <latitude>35.05956</latitude>
      <longitude>-106.80981</longitude>
    </CityName>
</Cities>

HTML:

<div id="map_canvas" style="width:460px;margin-left: 0px; padding: 0px; height:350px; text-align:center;"></div>

Add below script in head section.

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Javascript:

     window.onload = function () {
         if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
             xmlhttp = new XMLHttpRequest();
         }
         else {// code for IE6, IE5
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET", "Cities.xml", false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;
         var x = xmlDoc.getElementsByTagName("CityName");

         var mapOptions = {
             center: new google.maps.LatLng(39.8634242, -97.28818149999998),
             zoom: 3,
             mapTypeId: google.maps.MapTypeId.ROADMAP

         };

         var infoWindow = new google.maps.InfoWindow();
         var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

         for (i = 0; i < x.length; i++) {
             var latitudetest = x[i].getElementsByTagName("latitude")[0].childNodes[0].nodeValue;
             var longitudetest = x[i].getElementsByTagName("longitude")[0].childNodes[0].nodeValue;
             var data =  '<div style="min-width:175px;text-align:left; min-height:80px;color:#000000;font-family:arial,sans-serif;font-style:normal; font-size:13px;">' + '<span style="font-weight:bold;font-size:13px;color:#000000;font-family:arial,sans-serif;font-style:normal; ">'+ x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + '</span>' + '</div>';
             var myLatlng = new google.maps.LatLng(latitudetest, longitudetest);
             var bluePin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
            new google.maps.Size(32, 32),
            new google.maps.Point(0, 0),
            new google.maps.Point(14, 35));
             var pinShadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
            new google.maps.Size(59, 32),
            new google.maps.Point(0, 0),
            new google.maps.Point(14, 35));
             var marker = new google.maps.Marker({
                 position: myLatlng,
                 icon: bluePin,
                 shadow: pinShadow,
                 map: map,
                 title: x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
             });
             (function (marker, data) {
                 google.maps.event.addListener(marker, 'click', function (e) {
                     infoWindow.setContent(data);
                     infoWindow.open(map, marker);
                 });
             })(marker, data);
         }
     }
</script>

Upvotes: 0

sabotero
sabotero

Reputation: 4365

In the Initialize function do this (if your sure the markers have been loaded at this point):

for(var i=0; i< markers.length; i++){
    var marker = new google.maps.Marker({ position: markers[i].cord, map:map });
}

If the markers have not been loaded create a function like this:

function AddMarkers(){
    for(var i=0; i< markers.length; i++){
        var marker = new google.maps.Marker({ position: markers[i].cord, map:map });
    }
}

And call this function in the callback of your $.get like this:

 $.get('Customers.xml', function(xml) {
  var jsonObj = $.xml2json(xml);
    $.each(jsonObj.Marker, function(){
        var stat = this.site_status == "Critical" ? "redgoogle.png" : "green_marker.png";
        var latlng = new google.maps.LatLng (this.cordinantes);
             var mark = {
                    title:  this.title,
                    location: this.site_location,
                    cord: latlng,
                    icon: stat
                    }
            markers.push(mark);
    });

    AddMarkers();
    debugger;
});

That will add your markers, for information on how to generate a custom icon refers to

  1. GoogleMaps API Reference

  2. GoogleMaps Icon

You can complete the function AddMarkers to generate the icons and so on

Upvotes: 1

Related Questions