Parse XML from web and add multiple markers on google map api

Question

I'd like to get coordinates with parsing XML from the web and add multiple markers on google map. I can get coordinates but the markers don't show. How can I fix my problem? There is no error.

This is one of the XML datas.

<row>
 <COT_ADDR_FULL_NEW>서울특별시 동대문구 홍릉로1길 26</COT_ADDR_FULL_NEW>
 <COT_ADDR_FULL_OLD>서울특별시 동대문구 청량리동 777</COT_ADDR_FULL_OLD>
 <COT_COORD_X>127.043361984</COT_COORD_X>
 <COT_COORD_Y>37.580800789</COT_COORD_Y>
 <COT_CONTS_ID>Sijang_ddm_015</COT_CONTS_ID>
 <COT_CONTS_LAN_TYPE>KOR</COT_CONTS_LAN_TYPE>
 <COT_CONTS_NAME>청량리전통시장</COT_CONTS_NAME>
 <COT_SI_NAME/>
 <COT_GU_NAME>동대문구</COT_GU_NAME>
 <COT_DONG_NAME/>
 <COT_SAN_NAME/>
 <COT_MASTER_NO/>
 <COT_SLAVE_NO/>
 <COT_EXTRA_NAME/>
 <COT_TEL_NO>966-1040</COT_TEL_NO>
</row>

This is my javascript code.

  <script type="text/javascript">
    var map;
    var marker;
    var loc; // for saving coordinates that get from XML


    window.onload = function() {
      getXML();

      console.log(seoul);
      var seoul = {
        lat: 37.558424,
        lng: 127.000509
      };
      map = new google.maps.Map(
        document.getElementById('map'), {
          zoom: 11,
          center: seoul
        });
    }

    // function that sets map markers
    function setMarkers() {
      console.log("setMarkers");
      console.log(loc);
      /*for (var i = 0; i < Object.keys(locations).length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(Object.values(locations)),
          map: map
        });
      }*/
      marker = new google.maps.Marker({
        position: loc, // seet map marker position with loc
        map: map
      });
    }

    function getXML() {
      alert("getXML 실행");
      var xhr = new XMLHttpRequest();
      var url = "http://openapi.seoul.go.kr:8088/MY_API_KEY/xml/MgisIndepen/1/250/ ";
      xhr.open("GET", url);
      xhr.send("");

      xhr.onreadystatechange = function() {

        if (this.readyState == 4) {
          var xml = xhr.responseXML;
          var datas = xml.getElementsByTagName("row");
          var output = "";
          var count = 0;
          for (var i = 0; i < datas.length; i++) {
            if (typeof datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0] == undefined ||
              datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0] == null) {
              continue;
            } else {
              var lat = Number(datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0].nodeValue);
              var lng = Number(datas[i].getElementsByTagName("COT_COORD_Y")[0].childNodes[0].nodeValue)

              console.log(lat + " " + lng);
              loc = {lat: lat, lng: lng};
            } // else
          setMarkers(); // after parse all XML datas, call setMarkers function
          } // for
        } // if(this.readyState == 4)
      };
    }
  </script>

XML parsing works very well. I think saving coordinates or setting position on the map have some problems.

Answer 1

Two issues:

1. Your latitude and longitude are backwards ( COT_COORD_X is longitude, COT_COORD_Y is latitude).

{lat: 127.043361984, lng: 37.580800789}

(latitude must be between 90 and -90, center of map is:

 var seoul = {
    lat: 37.558424,
    lng: 127.000509
  };

2. There is an ordering issue in your code. The map is being initialized after the getXML() function is called, so the markers that are created in that function aren't added to the map.

Instead of:

window.onload = function() {
  getXML();

  console.log(seoul);
  var seoul = {
    lat: 37.558424,
    lng: 127.000509
  };
  map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 11,
      center: seoul
    });
}

Do:

window.onload = function() {
  var seoul = {
    lat: 37.558424,
    lng: 127.000509
  };
  console.log(seoul);
  map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 11,
      center: seoul
    });
  getXML();
}

proof of concept fiddle

code snippet:

 var map; var marker; var loc; // for saving coordinates that get from XML window.onload = function() { var seoul = { lat: 37.558424, lng: 127.000509 }; console.log(seoul); map = new google.maps.Map( document.getElementById('map'), { zoom: 11, center: seoul }); getXML(); } // function that sets map markers function setMarkers() { console.log("setMarkers"); console.log(loc); /*for (var i = 0; i < Object.keys(locations).length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(Object.values(locations)), map: map }); }*/ marker = new google.maps.Marker({ position: loc, // seet map marker position with loc map: map }); } function getXML() { // alert("getXML 실행"); var xml = parseXml(xmlData); var datas = xml.getElementsByTagName("row"); var output = ""; var count = 0; for (var i = 0; i < datas.length; i++) { if (typeof datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0] == undefined || datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0] == null) { continue; } else { var lng = Number(datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0].nodeValue); var lat = Number(datas[i].getElementsByTagName("COT_COORD_Y")[0].childNodes[0].nodeValue) console.log(lat + " " + lng); loc = { lat: lat, lng: lng }; } // else setMarkers(); // after parse all XML datas, call setMarkers function } // for } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('MicrosoftXMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } }; var xmlData = '<rows><row><COT_ADDR_FULL_NEW>서울특별시 동대문구 홍릉로1길 26</COT_ADDR_FULL_NEW><COT_ADDR_FULL_OLD>서울특별시 동대문구 청량리동 777</COT_ADDR_FULL_OLD><COT_COORD_X>127.043361984</COT_COORD_X><COT_COORD_Y>37.580800789</COT_COORD_Y><COT_CONTS_ID>Sijang_ddm_015</COT_CONTS_ID><COT_CONTS_LAN_TYPE>KOR</COT_CONTS_LAN_TYPE><COT_CONTS_NAME>청량리전통시장</COT_CONTS_NAME><COT_SI_NAME/><COT_GU_NAME>동대문구</COT_GU_NAME><COT_DONG_NAME/><COT_SAN_NAME/><COT_MASTER_NO/><COT_SLAVE_NO/><COT_EXTRA_NAME/><COT_TEL_NO>966-1040</COT_TEL_NO></row></rows>;' 

 html, body, #map { height: 100%; margin: 0; padding: 0; } 

 <div id="map"></div> <!-- Replace the value of the key parameter with your own API key. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>