• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:googlemapについて)

Google Mapを利用したサービスをサイトに導入する方法

このQ&Aのポイント
  • Google Mapを利用したサービスをサイトに導入する方法について教えてください。
  • サイトにGoogle Mapを表示し、phpとmysqlを利用して取得した住所から値を参照し、マップ上にピンを表示する方法を教えてください。
  • Google Mapを利用したサービスのAPIを使って実現する方法について教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.9

確かに中国が....ちょっとした間違えでした。 function MarkerPoints()内の ----- ×return {"lat":sum.lat/(points.length),"lng":sum.lng/(points.length)}; ○return {"lat":sum.lat/(points.length-1),"lng":sum.lng/(points.length-1)}; ----- です。

dcx147
質問者

お礼

続けてすみません。追記です。 markerpoints = new MarkerPoints(points); var polygon = new GPolygon(markerpoints.spoints); var polygonBounds = polygon.getBounds(); map.setCenter(new GLatLng(markerpoints.ave().lat, markerpoints.ave().lng), map.getBoundsZoomLevel(polygonBounds)); としたところ正常に動作する事を確認できました! panToではなくmap.setCenterがカギだったようです!

dcx147
質問者

補足

お陰様で正常になりました。 いろいろ試してみたのですが平均値の場合も中心地の場合もの座標が 安定しないようです。 状態は1県を3つのエリアにわけています(仮にA地区~C地区とします)。 C地区はいかなる順番でも全く同じ位置を表示してくれるのですが A→B→Cと移行する場合とその他の場合ではA,B地区の表示座標が異なります。 また、C→Bに以降した場合マーカーが全く見えない箇所が表示されるのですが もう一度Bをクリックするとマーカーが見える程度の場所へ移動します。 さらにBをクリックしていくと1pxづつ程度表示座標が変わりすっかりセンターを 表示するまで移動しつづけます。 ※Aも同様でした 調べてみたところmap.clearOverlays()で初期化されるようなのですが初期化が うまくいってないのでしょうか?

その他の回答 (8)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.8

せっかく作ったのでなので、整理して関数化しておきました。 function MarkerPoints(points){ var sum ={"lat":0,"lng":0}; for(i in points){ sum.lat=sum.lat+points[i].lat(); sum.lng=sum.lng+points[i].lng(); } this.ave=function(){ return {"lat":sum.lat/points.length,"lng":sum.lng/points.length}; } this.spoints = (function(points){ var spoints=points.sort(function(a,b){ if(a.lat() <= b.lat()){if(a.lng() <= b.lng()){return 1;}else{return -1;}} else{if(a.lng() <= b.lng()){return 1;}else{return -1;}} }); spoints.push(spoints[0]); return spoints; })(points); } です。 markerpoints=new MarkerPoints(points); var polygon = new GPolygon(markerpoints.spoints); var polygonBounds = polygon.getBounds(); map.panTo(new GLatLng(markerpoints.ave().lat,markerpoints.ave().lng)); //平均点 // map.panTo(polygonBounds.getCenter()); //中心点  map.setZoom(map.getBoundsZoomLevel(polygonBounds)); となります。

dcx147
質問者

補足

使い方ですが下記のような方法でいいのでしょうか? 下記で試したところ中国が表示されたり地図が出てこなかったりとなり 私の使い方の間違いかと思うのですが・・・ function AddMarker(markers) { // 全マーカー削除 map.clearOverlays(); var points=[]; // リスト削除 var list = document.getElementById('list'); while(list.hasChildNodes()){ list.removeChild(list.firstChild); } // マーカー追加 for (var i = 0; i < markers.length; i++) { // 吹き出し var content = markers[i].getAttribute("name") + '<br />'; content +=markers[i].getAttribute("addr") + '<br />'; content +='<a href="list.php?id=' + markers[i].getAttribute("id")+'">詳細情報</a>'; // サイドバー var sidebar = markers[i].getAttribute("name"); var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); // リストノード作成 var li = document.createElement('li'); // マーカー作成 var marker = MakeMarker(point, content, li); points.push(marker.getLatLng()); map.addOverlay(marker); // リスト追加 li.innerHTML = sidebar; list.appendChild(li); } // ここに追加しました markerpoints = new MarkerPoints(points); var polygon = new GPolygon(markerpoints.spoints); var polygonBounds = polygon.getBounds(); map.panTo(new GLatLng(markerpoints.ave().lat,markerpoints.ave().lng)); //平均点 // map.panTo(polygonBounds.getCenter()); //中心点  map.setZoom(map.getBoundsZoomLevel(polygonBounds)); } function MarkerPoints(points) { //略 }

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.7

yyr446です。もう少しのところ何ですね。ご検討を祈ります。 その後、私もランダムにマーカーを設置して、いびつなポリゴンでも、最初の方法で 中心点を取得出来る事が確認できたのですが、中心点ではなくて平均点にしないと 1つだけ離れたところにマーカーがあったりすると、思った地点を中心にできない ですね。そおいう事なのかなあ。 それから、平均を計算する方法ですが、PHPでもJAVASCRIPTでもロジックは、ほとんど 変わらないはずです。(PHPは配列取り扱い関数が豊富ですが) 算数がわかれば平均は計算できます。 この例だとpointsという配列に、latとlngが全て格納されていますから、 var latSum,lngSum,latAbe,lngAve; latSum=0; lngSum=0; for(var i=0;i<points.length;i++){ var latSum=latSum + points[i].lat(); var lngSum=lngSum + points[i].lng(); } latAbe=latSum / points.length; lngAbe=lngSum / points.length; map.panTo(new GLatLng(latAbe,lngAbe)); で出来ます。べたなコードです。もっとスマートなコードもあると思いますが...

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.6

だめでしたか。残念、やはり手抜き手法でしたね。 マーカーを順番につなげて、きれいにポリゴンにならないケースも ありますもんね。 その辺はAPIがうまくしてくれるかなあと期待したんですが... となると、 マーカーのlatはlatの配列、lngはlngの配列に格納しておいて、それぞれの 配列のmax値、min値でSW点とNE点を見つけて、その差の1/2から 中心点のlat、lngを計算するのです。

dcx147
質問者

お礼

続けてすみません。 DBから平均値を求め最終的に下記のようなXMLを生成しました。 <markers> <marker id="1" name="ほげ1" addr="ふが1" lat="***1" lng="***1"/> <marker id="2" name="ほげ2" addr="ふが2" lat="***2" lng="***2"/> <center c_lng="***" c_lat="***"/>←ここがセンター座標です。 </markers> そしてセンター座標の値を下記の***にいれてやれば実現できそうな気がするのですが どうやればjsで表示できますでしょうか? function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(***, ***), 15); // 略 } }

dcx147
質問者

補足

何度もお返事いただき本当にありがとうございます。 中心地を求める方法ですがわかるようでどのように書けばいいものか わからない状態です^^; jsは全くわからないのでphpでやってみようかと思いますがお時間ありましたら またご指導いただけますと幸いです!

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.5

具体的にはズームはしているようなのですがセンターが合いません。 =>すみませんうっかりミスしたかも。検証してないもんで、 ポリゴンを作る時、図形をとじないと、ポリゴンにならず、単なるライン になっちゃうから、中心点なんかないですよね。 ちょこっと追記が必要 //最初のポイントを最後に追加 points.push(point[0]); //その後 var polygon = new GPolygon(points); var polygonBounds = polygon.getBounds(); map.panTo(polygonBounds.getCenter()); map.setZoom(map.getBoundsZoomLevel(polygonBounds)); でどうでしょう。未検証ですが...

dcx147
質問者

補足

ご連絡遅くなりました^^; 下記のようにして試してみましたがやはり上手く動作しないようです。 遅い原因も判別できここをクリア―できれば完成なのですが困りました>< function AddMarker(markers) { // 全マーカー削除 map.clearOverlays(); var points=[]; // リスト削除 var list = document.getElementById('list'); while(list.hasChildNodes()){ list.removeChild(list.firstChild); } // マーカー追加 for (var i = 0; i < markers.length; i++) { // 吹き出し var content = markers[i].getAttribute("name") + '<br />'; content +=markers[i].getAttribute("addr") + '<br />'; content +='<a href="list?id=' + markers[i].getAttribute("id")+'">詳細情報</a>'; // サイドバー var sidebar = markers[i].getAttribute("name"); var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); // リストノード作成 var li = document.createElement('li'); // マーカー作成 var marker = MakeMarker(point, content, li); points.push(marker.getLatLng()); map.addOverlay(marker); // リスト追加 li.innerHTML = sidebar; list.appendChild(li); } points.push(point[0]); var polygon = new GPolygon(points); var polygonBounds = polygon.getBounds(); map.panTo(polygonBounds.getCenter()); map.setZoom(map.getBoundsZoomLevel(polygonBounds)); }

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

<phpではパラメーターを取得し都度問い合わせして配列を取得しDOMDocument でxmlを生成しているせいか20件程度の量でも表示に時間が掛かります。> については、mysqlの内容もPHPも不明ですから、なんとも言えません。 別途PHPのカテゴリーで聞いてみてください。 <また、それぞれのエリアでセンターの座標も変更したいのですが実現する にはどのような方法がありますでしょうか?> については、いろいろやり方はあるでしょうが、ダミーのポリゴンを 作っておくと便利です。 ループの前に var points=[]; を準備しておいて、マーカーを作成するたびに points.push(marker.getLatLng()); で位置を格納し、ループが終わったら var polygon = new GPolygon(points); でポリゴン作成し、 var polygonBounds = polygon.getBounds(); で、ポリゴン境界の矩形オブジェクトを生成 map.panTo(polygonBounds.getCenter()); で、矩形オブジェクトの中心座標に移動して、さらに map.setZoom(map.getBoundsZoomLevel(polygonBounds)); で、ちょうどよいズームレベルに変更します。

dcx147
質問者

補足

ソースを追加してみたのですがうまくいかないようです。 具体的にはズームはしているようなのですがセンターが合いません。 追加の方法がまちがいでしょうか? function AddMarker(markers) { //全マーカーを削除 map.clearOverlays(); var points=[]; //リストを削除 var list = document.getElementById('list'); while(list.hasChildNodes()){ list.removeChild(list.firstChild); } //マーカーを追加 for (var i = 0; i < markers.length; i++) { // 吹き出し var content = markers[i].getAttribute("name") + '<br />'; content +=markers[i].getAttribute("addr") + '<br />'; content +='<a href="list?id=' + markers[i].getAttribute("id")+'">詳細情報</a>'; // サイドバー var sidebar = markers[i].getAttribute("name"); var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); //リストノードを作成 var li = document.createElement('li'); //マーカーを作成 var marker = MakeMarker(point, content, li); points.push(marker.getLatLng()); map.addOverlay(marker); //リストを追加 li.innerHTML = sidebar; list.appendChild(li); } var polygon = new GPolygon(points); var polygonBounds = polygon.getBounds(); map.panTo(polygonBounds.getCenter()); map.setZoom(map.getBoundsZoomLevel(polygonBounds)); } もしくはload内のmap.setCenterを外すとか???

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

おっとJSONに変えちゃったのですか。 xml読み込み前提としてサンプル作ったので、適時にかえて下さい。 このサンプルは、サイドバー(UL)とMAPをCSSで2カラムレイアウトに しています。あなたのに合うようにCSSとHTMLを調整して下さい。 ※mapはbodyのonload="load()"で初期表示します。 ※<a href="marker.xml" onClick="Get_xml(this.href);return false;">marker.xmlのロード</a> のクリックでGet_xml()を呼び、XMLをロードします。 ※<ul id="list"></ul>内にリストを生成します。 <style type="text/css"> body {text-align:center;background-color:#E0FFFF;} #wrap {width:900px;text-align:left;margin:0px auto;} #inner { margin:0 5px; } #map {width:640px;float:right;border:1px solid black;overflow:scroll;} #side {width:230px;height:700px;padding:5px;float:left;border:1px solid black;overflow:scroll;background-color:#ccccff;} #list {padding-left:5px;margin:0px;list-style-type:none;} .clear { clear:both; } .clear hr { display:none; } </style> <body onload="load()" onunload="GUnload()"> <div id="wrap"> <div class="header"> <h3>Google MAP</h3> <hr /> </div> <div id="inner"> <div id="map"></div> <div id="side"> <a href="marker.xml" onClick="Get_xml(this.href);return false;">marker.xmlのロード</a> <ul id="list"></ul> </div> <div class="clear"><hr /></div> </div> <div id="footer"> </div> </div> </body> 肝心のscriptを順に説明すると まず、Get_xml(xmlfile)でXMLを読み込み、<markers>の子要素を markersに格納して、AddMarker(markers)を呼び出します。 function Get_xml(xmlfile){ /* // GET Request GDownloadUrl(xmlfile,function(data,responseCode){ var xml = GXml.parse(data); //TEXTで取得してXMLにパース var markers = xml.documentElement.getElementsByTagName("marker"); AddMarker(markers) }); */ // GET or POST Request var ajax = GXmlHttp.create(); ajax.open("GET",xmlfile,true); ajax.onreadystatechange = function() { if (ajax.readyState == 4) { var xml = ajax.responseXML; //XMLレスポンスをそのまま取得 var markers = xml.documentElement.getElementsByTagName("marker"); AddMarker(markers) } } ajax.send(null); } 次に、AddMarker()の部分です。ここではマーカーを作る MakeMarker()とサイドバーへのリストの追加を、markersの 数だけ繰り返します。(最初に全マーカーとリストを削除しています。 もしかしてイベントは削除しきれてないかも...) function AddMarker(markers){ //全マーカーを削除 map.clearOverlays(); //リストを削除 var list = document.getElementById('list'); while(list.hasChildNodes()){ list.removeChild(list.firstChild); } //マーカーを追加 for (var i = 0; i < markers.length; i++) { var content = markers[i].getAttribute("id") +'.' + markers[i].getAttribute("name"); content +='<div><a href="' + markers[i].getAttribute("link") +'"target="_blank">リンク</a></div>'; var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); //リストノードを作成 var li = document.createElement('li'); //マーカーを作成 var marker=MakeMarker(point,content,li) // marker.setImage(url); map.addOverlay(marker); //リストを追加 li.innerHTML='<img src="'+ marker.getIcon().image +'" />' + content; list.appendChild(li); /* 不要 marker.bindInfoWindowHtml(content); GEvent.bindDom(li,'click',marker,function(){ GEvent.trigger(this,'click'); }); */ } } そして MakeMarkerの中身は次のようになります。 ※マーカークリックでもリストクリックでも同じイベントになるよう 工夫しています。 function MakeMarker(point,content,node){ var myicon=new GIcon(G_DEFAULT_ICON); //myicon.image =url; var marker=new GMarker(point,{icon:myicon}); //マーカーの吹き出し登録 var closure = GEvent.callbackArgs(marker,function(content){ this.openInfoWindowHtml(content); },content); //マーカーのイベントリスナー追加 var marker_event = GEvent.bind(marker,'click',closure,function(){ this.apply(arguments); }); //リストのイベントリスナー追加 var list_event = GEvent.bindDom(node,'click',closure,function(){ this.apply(arguments); }); return marker; } 最後にmapロードの部分 ※普通これが一番最初の処理です。 var map; function load(){ if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map"),{size:new GSize(640,700)}); map.setCenter(new GLatLng(35.663328,139.732189), 12); map.addControl(new GMapTypeControl()); map.addMapType(G_PHYSICAL_MAP); map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl(),new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,15))); new GKeyboardHandler(map); }

dcx147
質問者

補足

サンプルまで用意していただいて本当にありがとございます。 jsonにした場合どのように改変していいかわからず結局xmlに戻し若干添削は行いましたが 無事に動作させる事ができました! 何点か質問なのですが・・・ <a href="xml.php?area=1" onClick="Get_xml(this.href); return false;">xml1</a> <a href="xml.php?area=2" onClick="Get_xml(this.href); return false;">xml2</a> <a href="xml.php?area=3" onClick="Get_xml(this.href); return false;">xml3</a> のようにしパラメーターで表示するエリアを決定しています。 phpではパラメーターを取得し都度問い合わせして配列を取得しDOMDocumentで xmlを生成しているせいか20件程度の量でも表示に時間が掛かります。 これはphpの問題かと 思うのですがいい方法はないでしょうか? また、それぞれのエリアでセンターの座標も変更したいのですが実現するにはどのような 方法がありますでしょうか? アドバイスだけでもいただけますと幸いです。宜しくおねがいいたします。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

とりあえず <markers> <marker lng="lng" lat="lat" id="1" name="名前1" link="リンク1"/> <marker lng="lng" lat="lat" id="2" name="名前2" link="リンク2"/> <marker lng="lng" lat="lat" id="3" name="名前3" link="リンク3"/> </markers> でも <markers> <marker> <id>1</id> <name>名前1</name> <lng>lng</lng> <lat>lat</lat> <link>リンク1</link> </marker> <marker> <id>2</id> <name>名前2</name> <lng>lng</lng> <lat>lat</lat> <link>リンク2</link> </marker> <marker> <id>3</id> <name>名前3</name> <lng>lng</lng> <lat>lat</lat> <link>リンク3</link> </marker> <markers> でも、どっちでもXMLとして処理可能です。ただ日本語が入っているので 先頭に<?xml version="1.0" encoding="UTF-8"?>宣言をお忘れなく 標準的な地理情報のマークアップはXMLの一種としてKMLという形式 があります。KMLはGoogleMap以外でも使われます。 http://code.google.com/intl/ja/apis/kml/documentation/kml_tut.html でもKMLを書くのはけっこう面倒なので、こだわる必要はありません。 さらに言えば、別にXMLでなくても、JSON形式でテキストファイル出力 を返すようににすれば、XMLをハンドリングする手間が省けます。

dcx147
質問者

補足

お返事ありがとうございます。 JSONいいですすね!phpの処理も楽だったのでxmlから切り替えました。 以下のソースでとりあえず一覧のマーカーを表示させる事まではなんとかできたのですが サイドバーをどう組み込めばいいものかで躓いております。 function load() { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(***, ***), 12); map.addControl(new GLargeMapControl3D()); GDownloadUrl("map.php", function(doc, stat) { eval("loaddata=" + doc); for (var i = 0; i < loaddata.data.length; i++) { var marker = makeMarker( loaddata.data[i].lat, loaddata.data[i].lng, loaddata.data[i].name, loaddata.data[i].addr, loaddata.data[i].link ); map.addOverlay(marker); } }); } function makeMarker(lat, lng, name, addr, link) { var point = new GLatLng(lat, lng); var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml( "<b>"+name+"</b><br>" + "住所:" + addr + "<br>" + "詳細:" + link ); }); return marker; } window.onload = load; window.onunload = GUnload; 以下のソースを追記してやればいいと思うのですがどの箇所に追加すればいいでしょうか? document.getElementById("side_bar").innerHTML = side_bar_html; side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br \/>';

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

いろいろ学習すれば、それほど難しくないです。 GooglwMapsAPIの使い方については、 http://googlemaps.googlermania.com/ がお勧めです。もちろん本家のリファレンス http://code.google.com/intl/ja/apis/maps/documentation/reference.html やフォーラム(Q&A) http://groups.google.com/group/Google-Maps-API-Japan/topics?hl=ja も参考にします。 javascriptから直接mysqlのDBを検索する事は不可能なので、その部分は PHPで別途作成して、javascriptからAJAX要求(GoogleMapsAPIにも機能あ ります)になります。 丸投げ回答サンプルは、時間があれば作ってみます。待っててね。

dcx147
質問者

お礼

追記です。それとも下記のようなxml形式の方が一般的でしょうか? 悩みが広がってきました・・・ <markers> <marker> <id>1</id> <name>名前1</name> <lng>lng</lng> <lat>lat</lat> <link>リンク1</link> </marker> <marker> <id>2</id> <name>名前2</name> <lng>lng</lng> <lat>lat</lat> <link>リンク2</link> </marker> <marker> <id>3</id> <name>名前3</name> <lng>lng</lng> <lat>lat</lat> <link>リンク3</link> </marker> <markers>

dcx147
質問者

補足

お返事ありがとうございます。 phpから必要な値を取得し下記のようなxmlを作りました。 <markers> <marker lng="lng" lat="lat" id="1" name="名前1" link="リンク1"/> <marker lng="lng" lat="lat" id="2" name="名前2" link="リンク2"/> <marker lng="lng" lat="lat" id="3" name="名前3" link="リンク3"/> </markers> これをjsに渡せばいいと思うのですがそこが全くわからない状態です^^; 希望としては、マーカーのアイコンはA-Zのものをそれぞれに使用しサイドバーに並ぶ リストアイコンも同じように表現したく思っております。 引続き調べてみますがまた不明であれば宜しくお願いいたします。

関連するQ&A

専門家に質問してみよう