XMLをGoogleMAP APIに読み込めません。

Question

xmlファイルをGoogleMapに読み込ませようと試したができませんでした。 ```javascript function DataXML(){ var text, parser, xmlDoc, ddd,b,c; text = ' \

\ \ ....... \ '; var parser = new DOMParser(); var xmlDoc = parser.parseFromString(text,"application/xml"); var googleMap = xmlDoc.getElementsByTagName('googleMaps')[0]; var b = googleMap.attributes.lat; var c = googleMap.attributes.lon; return xmlDoc; } var ddd = DataXML(); function initMap() { var map = new google.maps.Map(document.getElementById('demo'),{ zoom: 12, center: new google.maps.LatLng(41.409651, 2.183685), mapTypeId: google.maps.MapTypeId.ROADMAP }); var eee = new Number(ddd); var latLng = new google.maps.LatLng(eee.b,eee.c); var marker = new google.maps.Marker({ position: latLng, map: map, }); } ```

Accepted Answer

1. `parser.parseFromString()`の第1引数はパスではなくて、テキストデータです。
解決方法ですが、`text`にXMLのテキストデータを入れてください。
1. 非同期通信なので、`DataXML()`が実行されるまでにXMLの受信が終了しないと思います。
解決方法ですが、`xhttp.onreadystatechange`に書いてください。
1. `googleMaps`に入っているのは、おそらく[XMLDocument](>XMLDocument - Web APIs | MDN [XMLDocument - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLDocument))です。なので、`.lat`というプロパティはありません。
解決方法ですが、DOM API を使って参照してください。

### 質問の編集にあわせて追記
1. `parseFromString(text,"data/xml")`ですが、`data/xml`というMIMETYPEは不適切だと思います。
`application/xml`にしてみてください。
1. `getElementsByTagName('lat')`ですが、`lat`というタグはないようです。
おそらく、`getElementsByTagName('googleMaps')`の間違いかと思います。
1. `getElementsByTagName()`は[HTMLCollection](https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection)を返します。
そのため、`hoge[0]`などのように添え字をつけるなどしてアクセスする必要があります。
1. そして`hoge[0]`は[Element](https://developer.mozilla.org/ja/docs/Web/API/Element)です。この場合、`<googleMaps lat="41.359684477777776" lon="2.145138777777778"/>`などが入っています。
この要素の属性を得るには`attributes`プロパティにアクセスする必要があります。`.attributes.lat`などとしてみてください。
1. [new google.maps.LatLng()](https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLng)ですが、引数は数値です。
そのため、[Number](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number)などを利用する必要があります。

### 質問の編集にあわせて追記2
1. `var b = googleMap.attributes.lat;`ですが、`var`で宣言された変数は、その関数の中にスコープを持ち外からは参照できません。この場合、`DataXML()`の外側からは参照できないということです。
1. `return xmlDoc;`ですが、`xmlDoc`は変更を加えられていませんので、返ってくるのはXML全体のXMLDocumentです。これは想定と異なるのでは。
1. `new Number(ddd);`ですが、上のコメントのとおりです。`Number(文字列)`とすることで、数値化できます。この場合、`ddd`に入っているのは`xmlDoc`ですから、文字列ではありません。
1. `eee.b`ですが、3のとおり`eee`には期待しているものが入っていません。また、1のとおり、プロパティのように参照できるものでもありません。

開発者ツールを見て、エラーメッセージを読み、`console.log`などを使って、変数に入っている値とその構造を確認しながらコーディングを進めるべきです。

### コメントを受けて追記

```js
function DataXML(){

  var text, parser, xmlDoc;
  text ='...';

  var parser = new DOMParser();
  var  xmlDoc = parser.parseFromString(text,"application/xml");
  return xmlDoc.getElementsByTagName('googleMaps');
}

var googleMaps = DataXML();
var lat = Number( googleMaps[0].attributes.lat.value );
var lon = Number( googleMaps[0].attributes.lon.value );

function initMap() {

  var map = new google.maps.Map(document.getElementById('demo'),{
        zoom: 12,
        center: new google.maps.LatLng(41.409651, 2.183685),
        mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var latLng = new google.maps.LatLng(lat,lon);

     var marker = new google.maps.Marker({
         position: latLng,
         map: map,

    });
}
```
こちらだとどうなりますか？

Answer

質問の編集にあわせて追記

質問の編集にあわせて追記2

コメントを受けて追記

関連した質問