googlemapについて

http://maps.google.co.jp/maps?hl=ja&rlz=1T4ADBR_ …

上記URLのようなgooglemapを利用したサービスをサイトに使用したいです。

php,mysqlを利用し取得した住所から値を参照しmap上にピンを差し左側には一覧を表示すると
いう参照URLそのものを実現したいのですがどのようにやるのでしょうか？

APIを使っているのかな～程度でどのキーワード検索すればいいものかすらわからない状態です。

使い方について参照URL等ありましたら是非教えてください。

No.9 ベストアンサー 回答者： yyr446 回答日時： 2010/04/21 18:01

確かに中国が．．．．ちょっとした間違えでした。

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)};
－－－－－
です。

この回答への補足

お陰様で正常になりました。
いろいろ試してみたのですが平均値の場合も中心地の場合もの座標が
安定しないようです。

状態は1県を3つのエリアにわけています(仮にA地区～C地区とします)。
C地区はいかなる順番でも全く同じ位置を表示してくれるのですが
A→B→Cと移行する場合とその他の場合ではA,の表示座標が異なります。

また、C→Bに以降した場合マーカーが全く見えない箇所が表示されるのですが
もう一度Bをクリックするとマーカーが見える程度の場所へ移動します。
さらにBをクリックしていくと1pxづつ程度表示座標が変わりすっかりセンターを
表示するまで移動しつづけます。
※Aも同様でした

調べてみたところmap.clearOverlays()で初期化されるようなのですが初期化が
うまくいってないのでしょうか？

補足日時：2010/04/21 20:05

この回答へのお礼

続けてすみません。追記です。
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がカギだったようです！

お礼日時：2010/04/21 20:14

No.8 回答者： yyr446 回答日時： 2010/04/21 12:55

せっかく作ったのでなので、整理して関数化しておきました。

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));
となります。

この回答への補足

使い方ですが下記のような方法でいいのでしょうか？
下記で試したところ中国が表示されたり地図が出てこなかったりとなり
私の使い方の間違いかと思うのですが・・・

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)
{
//略
}

補足日時：2010/04/21 14:18

No.7 回答者： yyr446 回答日時： 2010/04/20 20:19

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));

で出来ます。べたなコードです。もっとスマートなコードもあると思いますが...

No.6 回答者： yyr446 回答日時： 2010/04/19 20:32

だめでしたか。

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

この回答への補足

何度もお返事いただき本当にありがとうございます。
中心地を求める方法ですがわかるようでどのように書けばいいものか
わからない状態です^^;

jsは全くわからないのでphpでやってみようかと思いますがお時間ありましたら
またご指導いただけますと幸いです！

補足日時：2010/04/20 16:28

この回答へのお礼

続けてすみません。
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);
// 略
}
}

お礼日時：2010/04/20 17:00

No.5 回答者： yyr446 回答日時： 2010/04/16 18:25

具体的にはズームはしているようなのですがセンターが合いません。

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

この回答への補足

ご連絡遅くなりました^^;
下記のようにして試してみましたがやはり上手く動作しないようです。
遅い原因も判別できここをクリア―できれば完成なのですが困りました><

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));

}

補足日時：2010/04/19 02:08

No.4 回答者： yyr446 回答日時： 2010/04/15 14:04

＜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));
で、ちょうどよいズームレベルに変更します。

この回答への補足

ソースを追加してみたのですがうまくいかないようです。
具体的にはズームはしているようなのですがセンターが合いません。

追加の方法がまちがいでしょうか？
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を外すとか？？？

補足日時：2010/04/16 11:35

No.3 回答者： yyr446 回答日時： 2010/04/14 14:54

おっとJSONに変えちゃったのですか。

xml読み込み前提としてサンプル作ったので、適時にかえて下さい。
このサンプルは、サイドバー(UL)とMAPをCSSで２カラムレイアウトに
しています。あなたのに合うように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);
}

この回答への補足

サンプルまで用意していただいて本当にありがとございます。
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の問題かと
思うのですがいい方法はないでしょうか？

また、それぞれのエリアでセンターの座標も変更したいのですが実現するにはどのような
方法がありますでしょうか？

アドバイスだけでもいただけますと幸いです。宜しくおねがいいたします。

補足日時：2010/04/14 21:57

No.2 回答者： yyr446 回答日時： 2010/04/14 09:28

とりあえず

<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/document …
でもKMLを書くのはけっこう面倒なので、こだわる必要はありません。
さらに言えば、別にXMLでなくても、JSON形式でテキストファイル出力
を返すようににすれば、XMLをハンドリングする手間が省けます。

この回答への補足

お返事ありがとうございます。
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 \/>';

補足日時：2010/04/14 11:28

No.1 回答者： yyr446 回答日時： 2010/04/13 09:37

いろいろ学習すれば、それほど難しくないです。

GooglwMapsAPIの使い方については、
http://googlemaps.googlermania.com/
がお勧めです。もちろん本家のリファレンス
http://code.google.com/intl/ja/apis/maps/documen …
やフォーラム（Q&A）
http://groups.google.com/group/Google-Maps-API-J …
も参考にします。
javascriptから直接mysqlのDBを検索する事は不可能なので、その部分は
PHPで別途作成して、javascriptからAJAX要求（GoogleMapsAPIにも機能あ
ります）になります。

丸投げ回答サンプルは、時間があれば作ってみます。待っててね。

この回答への補足

お返事ありがとうございます。
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のものをそれぞれに使用しサイドバーに並ぶ
リストアイコンも同じように表現したく思っております。

引続き調べてみますがまた不明であれば宜しくお願いいたします。

補足日時：2010/04/13 10:41

この回答へのお礼

追記です。それとも下記のような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>

お礼日時：2010/04/13 11:57