GoogleMaps API 住所から複数ピンを表示

解決済

質問者：noguri999
質問日時：2009/12/17 01:58
回答数：3件

GoogleMaps API素人ですが・・・

最近いろいろやっていてやっとDBの住所（日本語の住所　例：大阪府大阪市中央区平野町1丁目）を引っ張ってきてグーグルマップで座標を取得してピンを立てることに成功しました。

今苦戦しているのは同じ地図上に複数のピンをさす方法です。

どなかた教えていただけないでしょうか？

ちなみに今１ピン表示に成功してるコードはこちらです。
どこから、どこまで繰り返したらいいのでしょうか・・・？
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<? //DB（MySQL）からデータ取得
$address = $row["address"];
$fukidashi = "住所：".$row["address"];
?>

<div id="map" style="width:500px; height:400px; border:1px solid #999;"></div>

<script type="text/javascript">

</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yyr446
回答日時：2009/12/17 20:49

失礼します。

No1,No2の回答の続きです。
No2回答でPHPからXMLを返せるようになったら、それをAJAXして、
GoogleMapにマーカーを加えるhtml（javascript）です。
※ライブラリーは使ってません。Google Map APIのみです。
※ちょっと、余計な技巧に走って、地図内のマーカーだけでなく、
　2段組にして、左側にマーカー名と住所も表示し、そいつをクリック
　すると、地図が対応するマーカーまで移動して、吹き出しを開くように
　なっています。
（なんかCSSできれいにおもいどおりレイアウトするのがよくわからん
とりあえず崩れて無いと思うが）

プログラムのソースコードは、
（gcodingXML.htm）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Google Map From XML DATA</title>
<script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps?file=api&v=2&key=あなたのGoogle APIキー"></script>
<script type="text/javascript" charset="utf-8">

</script>
<body onload="Mapload()" onunload="GUnload()">
<h2>Google Map From XML DATA</h2>
<div style="width:800px;text-align:left;margin:0 auto;">
<div id="map" style="float:right;width:640px;height:480px;border:1px solid black;"></div>
<div>項目をクリックして移動</div>
<dl id="marker_navi" style="float:left;width:145px;padding-left:0px;margin-left:0px;"></dl>
<hr style="clear:both;display:none;">
</div>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2009/12/17 14:49

というわけで、まずはサーバー側（PHP）の見本

※MySQL準備してないので、テキストファイル（CSV形式）から住所を読み込んでます。
※こんなXMLを返します。
<?xml version="1.0" encoding="UTF-8"?>
<places>
<marker name="marker1" lat="35.830509" lng="139.7885203">日本埼玉県草加市西町５４１－５</marker>
<marker name="marker2" lat="35.6752276" lng="139.7677976">日本東京都中央区銀座１丁目</marker>
<marker name="marker3" lat="35.6909226" lng="139.7572061">日本東京都千代田区一ツ橋１丁目１</marker>
</places>

プログラムのソースコードは、
（geocodingXML.php）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<?php
setlocale(LC_ALL,'ja_JP');
header('Content-Type: text/xml; charset=utf-8');
$fin = fopen("address.csv","rb");
$row = 1;
$xml = xmlwriter_open_memory();
xmlwriter_start_document($xml,"1.0","utf-8");
xmlwriter_set_indent_string($xml," ");
xmlwriter_start_element($xml,"places");
while (($data = fgetcsv($fin,1000,",")) !== FALSE){
$addr = $data[0];
mb_convert_variables("UTF-8","auto",$addr);
list ($sarch_addr,$lat,$lng) = googleGeoCoding($addr);
if (!$sarch_addr==""){
xmlwriter_set_indent($xml,true);
xmlwriter_start_element($xml,"marker");
xmlwriter_write_attribute($xml,"name",'marker' . $row );
xmlwriter_write_attribute($xml,"lat",$lat );
xmlwriter_write_attribute($xml,"lng",$lng);
xmlwriter_text($xml,$sarch_addr);
xmlwriter_end_element($xml);
xmlwriter_set_indent($xml,false);
}
$row++;
}
fclose($fin);
xmlwriter_end_element($xml);
echo xmlwriter_output_memory($xml);

function googleGeoCoding($addr){
$apikey = "あなたのGoogle APIキー";
$GeoUrl = "http://maps.google.com/maps/geo?";
$addr = rawurlencode($addr);
$request = "&q=" . $addr . "&key=" . $apikey . "&hl=ja&output=json" ;
$json = file_get_contents( $GeoUrl . $request);
$json = json_decode(mb_convert_encoding($json, "UTF-8", "auto"));
while ($json->Status->code == '620'){
usleep(200000);
$json = file_get_contents( $GeoUrl . $request);
}
if($json->Status->code == '200'){
if ($json->Placemark[0]){
$json->Placemark = $json->Placemark[0];
}
$sarched_addr = $json->Placemark->address;
$sarched_Lon = $json->Placemark->Point->coordinates[0];
$sarched_Lat = $json->Placemark->Point->coordinates[1];
}else{
$sarched_addr = "";$sarched_Lat="";$sarched_Lon="";
}
return array($sarched_addr,$sarched_Lat,$sarched_Lon);
}
?>
こんな感じ、
次は、javascript
続く.....

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2009/12/17 09:30

ご提示のソースコードを工夫して、複数件対応にする事はやぶさかでは

ありませんが、このような場合サーバー側でDBを読み込む処理と、
クライアント側のブラウザーのjavascriptでGoogleMapを操作する処理は、
非同期なものですから、本来は切り離して処理した方がベターかも。
サーバー側は、HTTPリクエストによってDBを読み込んで住所を、HTMLとか
XML、JSON等のテキストデータとして出力します。javascript側は非同期
通信で取得したそのデータを使って、ジオコーディングし、地図にマッピン
グするようにします。非同期通信には、GmapAPIクラスの
GXmlHttp、GXml、 GDownloadUrlを使えます。
http://code.google.com/intl/ja/apis/maps/documen …
複数ジオコーディングの注意点としては、GClientGeocoderに連続して
要求を出すと、ステータスコード620が返されエラーになります。
タイムラグしてループさせるか、代わりにHTTPジオコーダーリクエスト
を使います。
http://code.google.com/intl/ja/apis/maps/documen …