• 締切済み

Google Maps API V3のxml

xmlファイルから読み込んだものを複数カスタムアイコン(情報ウィンドウ付)で表示させたいです。 現在アイコンは読まれずウィンドウも一つの状態です。 xmlからの緯度経度の取得はできるのですが、その他の情報の取得がわかりません。 下記がプログラムソースです。 xmlファイル <?xml version="1.0"?> -<markers> <marker season="" genre="" link="http://www.manyou-kumamoto.jp/castle/" type="culture" lng="130.705841" lat="32.806141" address="熊本県熊本市本丸1-1 " name="熊本城"/> <marker season="" genre="" link="http://www.greenland.co.jp/index2.html" type="reisure" lng="130.464676" lat="32.987690" address="熊本県荒尾市下井手1616" name="三井グリーンランド"/> </markers> javaプログラムソース $(function(){ $.ajax({ url:"map.xml", cache:false, dataType:"xml", success:function(xml){ var data=xmlRequest(xml); initialize(data); } }); }); function xmlRequest(xml){ var data=[]; $(xml).find("markers > marker").each(function(){ var dat={}; dat.lat=this.getAttribute("lat"); dat.lng=this.getAttribute("lng");//この辺の他のノード取得 $(this).children().each(function(){ if(this.childNodes.length>0)dat[this.tagName]=this.childNodes[0].nodeValue; }); data.push(dat); }); return data; } function initialize(data){ var op={ center : new google.maps.LatLng(32.791892438123696,130.704345703125), zoom : 9, mapTypeId : google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("map_canvas"),op); var reisure=new google.maps.MarkerImage( "d_5.ico", new google.maps.Size(48.0,64.0) ); var culture=new google.maps.MarkerImage( "d_6.ico" ); if (data != null) { var i=data.length; } while(i-- >0){ var dat=data[i]; var obj={ position:new google.maps.LatLng(dat.lat,dat.lng), map:map, icon:dat.type //使用の仕方はあってますか? }; var marker=new google.maps.Marker(obj); var infowindow = new google.maps.InfoWindow({ content:'<a href="dat.link"/>kumamoto</a>' //使用の仕方はあってますか? }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } } google.maps.event.addDomListener(window, "load", intialize); よろしくおねがいします。

  • AJAX
  • 回答数1
  • ありがとう数2

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

>xmlからの緯度経度の取得はできるのですが、その他の情報の取得がわかりません 未検証ですが・・・ lat、lngともにmarker要素の属性になっていますし、その他の情報も同じなので同様の方法で取得できませんか?  ○○.getAttribute("address"); とか  ○○.getAttribute("name");  で取得できると思いますけれど? mapのAPIについては、こちら(↓)に出ていますので、ここで確認するのがよろしいかと思います。 (英語ですが、クラスとメソッド、プロパティの一覧のようなものなので、英語がさっぱりの私でもなんとか…) https://developers.google.com/maps/documentation/javascript/reference Markerの定義で  icon:dat.type この時点で、dat.typeにはなにが入っているのだろうか・・・? (アイコンのアドレスをどこでdat.typeに定義していますか?) >現在アイコンは読まれずウィンドウも一つの状態です。 ウィンドウを沢山用意したいのであれば、インスタンスをそれだけ作成しておく必要があります。 一度に表示するものが一つでよければ、同じものを位置や内容を変えて表示することで足りるでしょう。 最近回答したものですが、似た部分がありますので・・・ http://okwave.jp/qa/q7894323.html

ariren4
質問者

お礼

ありがとうございます!!! やってみます!!!!

関連するQ&A

  • Google maps api v3

    https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja を参考にコーディングし、いろいろなサイトも調べてながら(手探り)ですが、どうしてもうまく表示されません。 【maps.php】にてxmlデータを生成しました。それを使ってサイトに表示させるというものです。 うまく表示されないというか、画面が真っ白になってしまいます。 アドバイス等ご教示頂ければ幸甚です。 【index.html】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Maps</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/jacascript"> //<![CDATA[ function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.66, 139.69), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("maps.php", function(data) { var xml = parseXml(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[[]i].getAttribute("name"); var address = markers[[]i].getAttribute("address"); var tel = markers[[]i].getAttribute("tel"); var email = markers[[]i].getAttribute("email"); var message = markers[[]i].getAttribute("message"); var point = new google.maps.LatLng( parseFloat(markers[[]i].getAttribute("lat")), parseFloat(markers[[]i].getAttribute("lng"))); var html = "" + name + " " + address; var icon = customIcons[[]type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html); } }); } 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.responseText, request.status); } }; request.open('GET', url, true); request.send(null); } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>

  • GoogleMapsAPIv3でXMLを取得(3)

    お世話になっております。 何度か質問しているのですが、新たに質問したいことがあります。 現在以下の様な形で、GoogleMapsAPIを使ってXMLデータを取得し、表示させています。  function initialize() { var myLatlng = new google.maps.LatLng(16.636192,158.9062); var myOptions = { zoom: 1, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var infowindow = new google.maps.InfoWindow; downloadUrl("xml/allplaces.xml", function(data) { var markers = data.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var linkurl = markers[i].getAttribute("linkurl"); var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br />'+linkurl+'</b>'; var marker = new google.maps.Marker({ map: map, position: point, title: name }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } 10行目の downloadUrl("xml/allplaces.xml", function(data) { の部分でXMLを指定していますが、これをHTML上の <input type="button" id="btn" value="" onClick="" /> といった、ボタンファンクションで、異なるXMLを指定したいです。 つまり、クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたいです。 分かる方いらっしゃいましたら、どうぞよろしくお願い致します。

  • Google Mapsからxmlファイルの読み込み

    お世話になっております。 質問はタイトルの通りです。javascriptのソースを以下のようになります。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー var map; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(34.5927356,135.50753655), 5); GEvent.addListener(map, "click", clickAction); } } function downloadData(){ GDownloadUrl("http://○○/yahoolocaltest2.php", function dispData(data, statusCode){ var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var lats = markers[i].getElementsByTagName("lat"); var lngs = markers[i].getElementsByTagName("lng"); var names = markers[i].getElementsByTagName("name"); var lat = parseFloat(GXml.value(lats[0])); var lng = parseFloat(GXml.value(lngs[0])); var name = GXml.value(names[0]); map.addOverlay(createMarker(lat, lng, name)); } }); } function createMarker(lat, lng, name) { var marker = new GMarker(new GLatLng(lat, lng)); var html = "<p>" + name + "</p>"; GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml(html); }); return marker; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 動けない所: function downloadData()の所には”yahoolocaltest2.php”というファイルを読み込みたいですが、マーカがでないです。 xmlデータは”~~.php”なんですが、実行結果は以下のようなxmlデータに整いました。 <?xml version='1.0' encoding='UTF-8' ?> <markers> <marker> <lat>35.2570706</lat> <lng>140.3977072</lng> <name>千葉県いすみ市</name> </marker> <marker> <lat>35.6766300</lat> <lng>139.7425472</lng> <name>東京都千代田区</name> </marker> <marker> <lat>35.6785042</lat> <lng>139.7415028</lng> <name>東京都千代田区</name> </marker> </markers> この結果は"~~.xml"という名前の保存したら、表示できますが。”~~.php”の形式なら表示できないです。 全くの新人なんですが、ご指導をお待ちしております。ありがとうございます。

  • GoogleMap APIマーカーマネージャーとXMLの読み込み

    Google Codeのページ http://code.google.com/intl/ja/apis/maps/documentation/overlays.html#Marker_Manager に載っていたマーカーマネージャーを使用し、さらにGDownloadUrlでXMLを読み込んで http://code.google.com/intl/ja/apis/maps/documentation/services.html 地図を作成しようとしております。 現在記述は以下のようになっています。 ----- var map = null; var mgr = null; var batch = []; function setupMap() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.66332844365397,139.7321891784668),16); map.addControl(new GLargeMapControl()); map.enableDoubleClickZoom(); window.setTimeout(setupMarkers, 0); } } function getMarkers() { GDownloadUrl("○○○.xml", createMap); return batch; } function createMap(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var markeropts = new Object(); markeropts.title = name; var marker = new GMarker(new GPoint(lng,lat), markeropts); batch.push(marker); // ※1 } return batch; } function setupMarkers() { mgr = new MarkerManager(map); mgr.addMarkers(getMarkers(), 14); mgr.refresh(); } ----- いろいろと検証の結果、XMLの読み込みはうまくいっており、※1のところでbatchにはちゃんとpushされていることは確認したのですが、最終的にマーカーは表示されません。 function getMarkersが function getMarkers() { var batch = []; var markeropts = new Object(); markeropts.title = "六本木"; var marker = new GMarker(new GPoint(35.66332844365397,139.7321891784668), markeropts); batch.push(marker); return batch; } の時はマーカーがちゃんと表示されたことも確認しております。 どこがおかしいのでしょうか? また、根本的に間違っているor他にいい方法があるのであればご教示ください。 よろしくお願い致します。

  • GoogleMapsAPIv3でXMLを取得(2)

    以前も一度質問しましたが、新たな障壁が出てきたので同じタイトルで質問させていただきます。 Google Maps API v3でサーバー上にあるXMLファイルを利用して、マーカーを出現させようと思います。 現在以下のようなコードで挑戦しています。 <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="util.js"></script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(35.682956, 139.727554); var myOptions = { zoom: 12, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); downloadUrl("http://ja.xml", function(data) { var markers = data.getElementsByTagName("Event"); for (var i = 0; i < markers.length; i++) { var lat = parseFloat(markers[i].getElementsByTagName("Latitude")[0].childNodes[0].nodeValue); var lng = parseFloat(markers[i].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue); lat = lat - lat * 0.00010695 + lng * 0.000017464 + 0.0046017; lng = lng - lat * 0.000046038 - lng * 0.000083043 + 0.010040; var latlng = new google.maps.LatLng(lat,lng); var marker = new google.maps.Marker({position: latlng, map: map}); } }); } </script> </head> このコードの場合、同ディレクトリ、または同サーバーにあるXMLを読み込むとうまく動作したのですが、Web上で公開されているようなXMLだとうまく表示されませんでした。 downloadUrlというのは同サーバーの物しか対応していないのでしょうか。 それとも他に原因が考えられますか? ご存じの方いらっしゃいましたらよろしくお願い致します。

  • GoogleMapsAPIv3でXMLを取得

    Google Maps API v3でサーバー上にあるXMLファイルを利用して、マーカーを出現させようと思います。 いろいろ調べていたところ、XMLのデータが <markers>  <marker lat="37.413320" lng="-122.125604"/>  <marker lat="37.433480" lng="-122.139062"/> </markers> 上記のような場合、 var markers = data.documentElement.getElementsByTagName("marker")でXMLのデータを取得し、数値を使いたいところで、 getAttribute("lat") getAttribute("lng") を使うことは調べていてわかりました。 しかし、 <markers> <Latitude>35.679858</Latitude> <Longitude>13.689478</Longitude> </markers> このようにXMLデータが書かれている場合、どのようにLatitude, Longtitudeの値を取得すればいいのかがわかりません。XMLは提供されているものを利用するので、変更できません。 このような場合の数値の取得方法がわかる方いらっしゃいましたら教えてください。

  • Google Maps V3のズームの規制

    現在htmlにはhead内に <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=123456&sensor=false"></script> <script language="JavaScript" type="text/javascript" src="v3.js"></script> v3スクリプト内に //functionコード function mapload() { var latlng = new google.maps.LatLng(123,456); var opts = { zoom: 16, center: latlng, //マップタイプHYBRID(航空写真+地図)ROADMAP(地図)SATELLITE(航空写真)TERRAIN(地形) mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeId: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN ] } }; //IDコード var map = new google.maps.Map (document.getElementById("map"),opts); //Marker var LatLng = new google.maps.LatLng(123,456); var contentString = 'ここです!€'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var image = new google.maps.MarkerImage ('アイコンURL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var shadow = new google.maps.MarkerImage ('アイコン影画像URL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var marker = new google.maps.Marker({ position: LatLng, map: map, title: "ここです!",icon: image,shadow: shadow }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } と記載し、html内のスクリプトのとこに表示しています。 表示される地図のズームを規制したいと考え、mapType.maxZoom = 19; mapType.minZoom = 2;のようなものを記入しても何も変化しません。 上記スクリプトの表記のどこに何を入れれば規制できるのでしょうか。 追伸、google.maps.MapTypeId.TERRAINと地図と地形のみ表示指定しているのですが、実際は、地図と航空地図になります。

  • Google Maps API V3

    Google Maps API V3 でXMLのデータがかなり多いので XMLから取り出すデータをgoogleマップで表示するデータのみ 取り出してマーカを表示したい場合どのようにすればいいのでしょうか

    • ベストアンサー
    • AJAX
  • google maps APIのジオコーディング

    google maps APIで2箇所の住所を入力し、ジオコーディングし、マーカーを表示させ、2箇所のマーカーの中間点が画面の中心になるように表示させたいのですが、なかなか地図の中心を移動できません。どのようにすればうまくできるでしょうか? //HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> ジオコーディング</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> </head> <body onload="initialize()"> <div> 地点1<input id="start" type="textbox" size="50"><br> 地点2<input id="goal" type="textbox" size="50"> <input type="button" value="地図表示" onclick="codeAddress()"> </div> <div id="map_canvas" style="height:80%"></div> <br>地点1 <div id="geocoder_info" style="height:10%"></div> 地点2 <div id="geocoder_info2" style="height:10%"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script src="geocode.js"></script> </body> </html> //javascript geocode.js var map; var geocoder; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.699338,139.705146); var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map($("#map_canvas").get(0), myOptions); } function codeAddress() { var address = document.getElementById("start").value; var info = document.getElementById("geocoder_info"); geocoder.geocode( {'address': address},function(results, status) { info.innerHTML = results[0].formatted_address + "<br>" + results[0].geometry.location; if (status == google.maps.GeocoderStatus.OK) { Slat = results[0].geometry.location.lat(); Slng = results[0].geometry.location.lng(); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("次の理由でジオコーディングに失敗しました: " + status); } }); var address2 = document.getElementById("goal").value; var info2 = document.getElementById("geocoder_info2"); geocoder.geocode( { 'address': address2},function(results2, status2) { info2.innerHTML = results2[0].formatted_address + "<br>" + results2[0].geometry.location; if (status2 == google.maps.GeocoderStatus.OK) { Glat = results2[0].geometry.location.lat(); Glng = results2[0].geometry.location.lng(); var marker2 = new google.maps.Marker({ map: map, position: results2[0].geometry.location }); } else { alert("次の理由でジオコーディングに失敗しました: " + status); } }); latCenter = ((results[0].geometry.location.lat()) + (results2[0].geometry.location.lat()))/2; lngCenter = ((results[0].geometry.location.lng()) + (results2[0].geometry.location.lng()))/2; map.setCenter(latCenter,lngCenter); }

  • グーグルマップ v3で複数の住所からピンを立てたい

    現在、googlemap v3で複数の住所からそれぞれのピンを立てたいと 考えております。 下記コードにて実行しましたが、住所とウィンドーの中身が ずれて表示されてしまい困っております。 例)東京にピンが立っているがウィンドーの中身が広島など どなたかご教授ください。 よろしくお願いいたします。 -----js------ var data = new Array(); data.push({position:'東京都',content:'東京都'}); data.push({position:'広島県',content:'<strong>広島県</strong><p>aaaaaaaaaa</p>'}); data.push({position:'沖縄',content:'<strong>沖縄</strong><p>aaaaaaaaaa</p>'}); data.push({position:'北海道',content:'<strong>北海道</strong><p>aaaaaaaaaa</p>'}); var geocoder = new google.maps.Geocoder(),icon = ''; function gmap(address,path){ icon = path; geocoder.geocode({'address':address}, function(result,status){ if(status == google.maps.GeocoderStatus.OK){ var latlng = result[0].geometry.location; var mapdiv = document.getElementById('map'); var myOptions = { zoom:10, center:new google.maps.LatLng(latlng.lat(),latlng.lng()), mapTypeId:google.maps.MapTypeId.ROADMAP, scaleControl:true, mapTypeControl:true }; var map = new google.maps.Map(mapdiv,myOptions); moreGmap(map); } }); } var j = 0; function moreGmap(map){ var image = new google.maps.MarkerImage(icon,new google.maps.Size(32,50),new google.maps.Point(0,0),new google.maps.Point(16,50)); for(var i in data){ geocoder.geocode({'address':data[i].position},function(result,status){ if(status == google.maps.GeocoderStatus.OK){ var latlng = result[0].geometry.location; var addlatlng = new google.maps.LatLng(latlng.lat(),latlng.lng()); var marker = new google.maps.Marker({ position:addlatlng, map:map, icon:image, title:data[j].position }); var cont = data[j].content; var infoWin = new google.maps.InfoWindow({ content:cont, size:new google.maps.Size(50,50) }); infoWin.open(map,marker); google.maps.event.addListener(marker,'click',function(){ infoWin.open(map,marker); }); j++; } }); } j = 0; }

専門家に質問してみよう