Google Maps JavaScript API V3 « 夢茶爺＆苦茶爺のPC奮戦備忘録

ジオコーディング

Posted by muchag | Google Maps JavaScript API V3,PHP | 2011-08-09 (火) 16:56:51

ジオコーディングとは、住所から緯度・経度へ変換すること。
Google Maps API 以外に同様のサービスがあるようだ。

Google Code：Google Geocoding API

ジオコーディング住所から緯度・経度を取得
逆ジオコーディング緯度・経度から住所を取得（リバースジオコーディング）

リクエスト

http://maps.google.com/maps/api/geocode/output?parameters
　

output

json
xml

いずれかを指定する。

例） http://maps.google.com/maps/api/geocode/json
　

parameters

address latlng とのいずれか必須。住所。UTF-8。要 URL エンコード。ジオコーディング
latlng address とのいずれか必須。緯度,経度の書式。逆ジオコーディング
bounds 不明。未試行
region 地域コード。未試行
language 戻り値の言語。日本語にしたい場合は、language=ja
sensor 必須。センサー（GPS）機能付きの端末か否か

例） http://maps.google.com/maps/api/geocode/json?latlng=35.123456,139.123456&language=ja&sensor=false
　

PHP

ジオコーディング

$strResult = file_get_contents(
'http://maps.google.com/maps/api/geocode/json'
. '?address=' . urlencode( mb_convert_encoding('東京都港区芝公園４丁目２', 'UTF-8' ) )
. '&sensor=false'
);
$arrResult = json_decode($strResult, true);
print_r($arrResult);
// output
Array
(
[results] => Array
(
[0] => Array
(
[address_components] => Array
(
[0] => Array
(
[long_name] => ２
[short_name] => ２
[types] => Array
(
[0] => sublocality_level_3
[1] => sublocality
[2] => political
)
)
[1] => Array
(
[long_name] => ４丁目
[short_name] => ４丁目
[types] => Array
(
[0] => sublocality_level_2
[1] => sublocality
[2] => political
)
)
[2] => Array
(
[long_name] => 芝公園
[short_name] => 芝公園
[types] => Array
(
[0] => sublocality_level_1
[1] => sublocality
[2] => political
)
)
[3] => Array
(
[long_name] => Minato
[short_name] => Minato
[types] => Array
(
[0] => locality
[1] => political
)
)
[4] => Array
(
[long_name] => Tokyo
[short_name] => Tokyo
[types] => Array
(
[0] => administrative_area_level_1
[1] => political
)
)
[5] => Array
(
[long_name] => Japan
[short_name] => JP
[types] => Array
(
[0] => country
[1] => political
)
)
)
[formatted_address] => Japan, Tokyo Minato芝公園４丁目２
[geometry] => Array
(
[bounds] => Array
(
[northeast] => Array
(
[lat] => 35.6594319
[lng] => 139.7463427
)
[southwest] => Array
(
[lat] => 35.6578418
[lng] => 139.7443429
)
)
[location] => Array
(
[lat] => 35.6586039
[lng] => 139.7451331
)
[location_type] => APPROXIMATE
[viewport] => Array
(
[northeast] => Array
(
[lat] => 35.6676693
[lng] => 139.7611405
)
[southwest] => Array
(
[lat] => 35.6495375
[lng] => 139.7291257
)
)
)
[types] => Array
(
[0] => sublocality_level_3
[1] => sublocality
[2] => political
)
)
)
[status] => OK
)

逆ジオコーディング

$strResult = file_get_contents(
'http://maps.google.com/maps/api/geocode/json'
. '?latlng=35.6586039,139.7451331'
. '&language=ja'
. '&sensor=false'
);
$arrResult = json_decode($strResult, true);
print_r($arrResult);
// output
Array
(
[results] => Array
(
[0] => Array
(
[address_components] => Array
(
[0] => Array
(
[long_name] => ８
[short_name] => ８
[types] => Array
(
[0] => sublocality_level_4
[1] => sublocality
[2] => political
)
)
[1] => Array
(
[long_name] => ２
[short_name] => ２
[types] => Array
(
[0] => sublocality_level_3
[1] => sublocality
[2] => political
)
)
[2] => Array
(
[long_name] => ４丁目
[short_name] => ４丁目
[types] => Array
(
[0] => sublocality_level_2
[1] => sublocality
[2] => political
)
)
[3] => Array
(
[long_name] => 芝公園
[short_name] => 芝公園
[types] => Array
(
[0] => sublocality_level_1
[1] => sublocality
[2] => political
)
)
[4] => Array
(
[long_name] => 港区
[short_name] => 港区
[types] => Array
(
[0] => locality
[1] => political
)
)
[5] => Array
(
[long_name] => 東京都
[short_name] => 東京都
[types] => Array
(
[0] => administrative_area_level_1
[1] => political
)
)
[6] => Array
(
[long_name] => 日本
[short_name] => JP
[types] => Array
(
[0] => country
[1] => political
)
)
)
[formatted_address] => 日本, 東京都港区芝公園４丁目２－８
[geometry] => Array
(
[location] => Array
(
[lat] => 35.6587039
[lng] => 139.7454081
)
[location_type] => APPROXIMATE
[viewport] => Array
(
[northeast] => Array
(
[lat] => 35.660052880292
[lng] => 139.74675708029
)
[southwest] => Array
(
[lat] => 35.657354919709
[lng] => 139.74405911971
)
)
)
[types] => Array
(
[0] => sublocality_level_4
[1] => sublocality
[2] => political
)
)
[1] => Array
(
[address_components] => Array
(
[0] => Array
(
[long_name] => ２
[short_name] => ２
[types] => Array
(
[0] => sublocality_level_3
[1] => sublocality
[2] => political
)
)
[1] => Array
(
[long_name] => ４丁目
[short_name] => ４丁目
[types] => Array
(
[0] => sublocality_level_2
[1] => sublocality
[2] => political
)
)
[2] => Array
(
[long_name] => 芝公園
[short_name] => 芝公園
[types] => Array
(
[0] => sublocality_level_1
[1] => sublocality
[2] => political
)
)
[3] => Array
(
[long_name] => 港区
[short_name] => 港区
[types] => Array
(
[0] => locality
[1] => political
)
)
[4] => Array
(
[long_name] => 東京都
[short_name] => 東京都
[types] => Array
(
[0] => administrative_area_level_1
[1] => political
)
)
[5] => Array
(
[long_name] => 日本
[short_name] => JP
[types] => Array
(
[0] => country
[1] => political
)
)
)
[formatted_address] => 日本, 東京都港区芝公園４丁目２
[geometry] => Array
(
[bounds] => Array
(
[northeast] => Array
(
[lat] => 35.6594319
[lng] => 139.7463427
)
[southwest] => Array
(
[lat] => 35.6578418
[lng] => 139.7443429
)
)
[location] => Array
(
[lat] => 35.6586039
[lng] => 139.7451331
)
[location_type] => APPROXIMATE
[viewport] => Array
(
[northeast] => Array
(
[lat] => 35.659985830291
[lng] => 139.74669178029
)
[southwest] => Array
(
[lat] => 35.657287869708
[lng] => 139.74399381971
)
)
)
[types] => Array
(
[0] => sublocality_level_3
[1] => sublocality
[2] => political
)
)
[2] => Array
(
[address_components] => Array
(
[0] => Array
(
[long_name] => ４丁目
[short_name] => ４丁目
[types] => Array
(
[0] => sublocality_level_2
[1] => sublocality
[2] => political
)
)
[1] => Array
(
[long_name] => 芝公園
[short_name] => 芝公園
[types] => Array
(
[0] => sublocality_level_1
[1] => sublocality
[2] => political
)
)
[2] => Array
(
[long_name] => 港区
[short_name] => 港区
[types] => Array
(
[0] => locality
[1] => political
)
)
[3] => Array
(
[long_name] => 東京都
[short_name] => 東京都
[types] => Array
(
[0] => administrative_area_level_1
[1] => political
)
)
[4] => Array
(
[long_name] => 日本
[short_name] => JP
[types] => Array
(
[0] => country
[1] => political
)
)
)
[formatted_address] => 日本, 東京都港区芝公園４丁目
[geometry] => Array
(
[bounds] => Array
(
[northeast] => Array
(
[lat] => 35.6598254
[lng] => 139.7504335
)
[southwest] => Array
(
[lat] => 35.6529283
[lng] => 139.7433174
)
)
[location] => Array
(
[lat] => 35.6574486
[lng] => 139.7470913
)
[location_type] => APPROXIMATE
[viewport] => Array
(
[northeast] => Array
(
[lat] => 35.6598254
[lng] => 139.7504335
)
[southwest] => Array
(
[lat] => 35.6529283
[lng] => 139.7433174
)
)
)
[types] => Array
(
[0] => sublocality_level_2
[1] => sublocality
[2] => political
)
)
[3] => Array
(
[address_components] => Array
(
[0] => Array
(
[long_name] => 106-0044
[short_name] => 106-0044
[types] => Array
(
[0] => postal_code
)
)
[1] => Array
(
[long_name] => 日本
[short_name] => JP
[types] => Array
(
[0] => country
[1] => political
)
)
)
[formatted_address] => 〒106-0044, 日本
[geometry] => Array
(
[bounds] => Array
(
[northeast] => Array
(
[lat] => 35.6600953
[lng] => 139.7473204
)
[southwest] => Array
(
[lat] => 35.6534543
[lng] => 139.7358241
)
)
[location] => Array
(
[lat] => 35.6564125
[lng] => 139.7425667
)
[location_type] => APPROXIMATE
[viewport] => Array
(
[northeast] => Array
(
[lat] => 35.6600953
[lng] => 139.7473204
)
[southwest] => Array
(
[lat] => 35.6534543
[lng] => 139.7358241
)
)
)
[types] => Array
(
[0] => postal_code
)
)
[4] => Array
(
[address_components] => Array
(
[0] => Array
(
[long_name] => 芝公園
[short_name] => 芝公園
[types] => Array
(
[0] => sublocality_level_1
[1] => sublocality
[2] => political
)
)
[1] => Array
(
[long_name] => 港区
[short_name] => 港区
[types] => Array
(
[0] => locality
[1] => political
)
)
[2] => Array
(
[long_name] => 東京都
[short_name] => 東京都
[types] => Array
(
[0] => administrative_area_level_1
[1] => political
)
)
[3] => Array
(
[long_name] => 日本
[short_name] => JP
[types] => Array
(
[0] => country
[1] => political
)
)
)
[formatted_address] => 日本, 東京都港区芝公園
[geometry] => Array
(
[bounds] => Array
(
[northeast] => Array
(
[lat] => 35.6621377
[lng] => 139.7528936
)
[southwest] => Array
(
[lat] => 35.6529258
[lng] => 139.7432918
)
)
[location] => Array
(
[lat] => 35.6575015
[lng] => 139.7521575
)
[location_type] => APPROXIMATE
[viewport] => Array
(
[northeast] => Array
(
[lat] => 35.6621377
[lng] => 139.7528936
)
[southwest] => Array
(
[lat] => 35.6529258
[lng] => 139.7432918
)
)
)
[types] => Array
(
[0] => sublocality_level_1
[1] => sublocality
[2] => political
)
)
[5] => Array
(
[address_components] => Array
(
[0] => Array
(
[long_name] => 105-0011
[short_name] => 105-0011
[types] => Array
(
[0] => postal_code
)
)
[1] => Array
(
[long_name] => 日本
[short_name] => JP
[types] => Array
(
[0] => country
[1] => political
)
)
)
[formatted_address] => 〒105-0011, 日本
[geometry] => Array
(
[bounds] => Array
(
[northeast] => Array
(
[lat] => 35.6625143
[lng] => 139.7537082
)
[southwest] => Array
(
[lat] => 35.6509114
[lng] => 139.7434881
)
)
[location] => Array
(
[lat] => 35.6575015
[lng] => 139.7521575
)
[location_type] => APPROXIMATE
[viewport] => Array
(
[northeast] => Array
(
[lat] => 35.6625143
[lng] => 139.7537082
)
[southwest] => Array
(
[lat] => 35.6509114
[lng] => 139.7434881
)
)
)
[types] => Array
(
[0] => postal_code
)
)
[6] => Array
(
[address_components] => Array
(
[0] => Array
(
[long_name] => 港区
[short_name] => 港区
[types] => Array
(
[0] => locality
[1] => political
)
)
[1] => Array
(
[long_name] => 東京都
[short_name] => 東京都
[types] => Array
(
[0] => administrative_area_level_1
[1] => political
)
)
[2] => Array
(
[long_name] => 日本
[short_name] => JP
[types] => Array
(
[0] => country
[1] => political
)
)
)
[formatted_address] => 日本, 東京都港区
[geometry] => Array
(
[bounds] => Array
(
[northeast] => Array
(
[lat] => 35.6825958
[lng] => 139.7828356
)
[southwest] => Array
(
[lat] => 35.6231224
[lng] => 139.7087473
)
)
[location] => Array
(
[lat] => 35.6580681
[lng] => 139.7515992
)
[location_type] => APPROXIMATE
[viewport] => Array
(
[northeast] => Array
(
[lat] => 35.6825958
[lng] => 139.7828356
)
[southwest] => Array
(
[lat] => 35.6231224
[lng] => 139.7087473
)
)
)
[types] => Array
(
[0] => locality
[1] => political
)
)
[7] => Array
(
[address_components] => Array
(
[0] => Array
(
[long_name] => 東京都
[short_name] => 東京都
[types] => Array
(
[0] => administrative_area_level_1
[1] => political
)
)
[1] => Array
(
[long_name] => 日本
[short_name] => JP
[types] => Array
(
[0] => country
[1] => political
)
)
)
[formatted_address] => 日本, 東京都
[geometry] => Array
(
[bounds] => Array
(
[northeast] => Array
(
[lat] => 35.898644
[lng] => 139.919853
)
[southwest] => Array
(
[lat] => 35.50119
[lng] => 138.942758
)
)
[location] => Array
(
[lat] => 35.6894875
[lng] => 139.6917064
)
[location_type] => APPROXIMATE
[viewport] => Array
(
[northeast] => Array
(
[lat] => 35.898644
[lng] => 139.919853
)
[southwest] => Array
(
[lat] => 35.50119
[lng] => 138.942758
)
)
)
[types] => Array
(
[0] => administrative_area_level_1
[1] => political
)
)
[8] => Array
(
[address_components] => Array
(
[0] => Array
(
[long_name] => 日本
[short_name] => JP
[types] => Array
(
[0] => country
[1] => political
)
)
)
[formatted_address] => 日本
[geometry] => Array
(
[bounds] => Array
(
[northeast] => Array
(
[lat] => 45.6691047
[lng] => 149.120962
)
[southwest] => Array
(
[lat] => 23.9207972
[lng] => 122.91
)
)
[location] => Array
(
[lat] => 36.204824
[lng] => 138.252924
)
[location_type] => APPROXIMATE
[viewport] => Array
(
[northeast] => Array
(
[lat] => 45.6691047
[lng] => 149.120962
)
[southwest] => Array
(
[lat] => 23.9207972
[lng] => 122.91
)
)
)
[types] => Array
(
[0] => country
[1] => political
)
)
)
[status] => OK
)

Google Maps JavaScript API V3,PHP | 2011-08-09 (火) 16:56:51 |

Comments (0)

event

Posted by muchag | Google Maps JavaScript API V3 | 2011-07-22 (金) 22:21:39

Google マップに対してユーザがことを起こすと
event オブジェクトが生成される。

Google Code：Google Maps JavaScript API V3 のイベント

種類

状態変化イベント
ユーザイベント

API クラス毎に様々なイベントが用意されている。

Google Code：Google Maps JavaScript API V3 リファレンス
　

受け取り

addListener(instance:Object, eventName:string, handler:Function)

Google Code：Google Maps JavaScript API V3 リファレンス　MapsEventListener オブジェクトの仕様

第１引数：イベントを受け取るオブジェクト
第２引数：イベント名称
第３引数：イベント処理メソッド
　

/* Map オブジェクトの zoom 値が変更されるイベント */
google.maps.event.addListener(map, 'zoom_changed', function() {
setTimeout(moveToDarwin, 3000);
});
/* Marker オブジェクトが click されるイベント */
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
});

プロパティ

latLng

イベントが発生した位置のカーソルの緯度/経度。

/* Map オブジェクトの zoom 値が変更されるイベント */
google.maps.event.addListener(map, 'click', function(event) {
var latlng = event.latLng; /* ← クリックされた場所の緯度・経度 */
});
/* Marker オブジェクトが click されるイベント */
google.maps.event.addListener(marker, 'click', function(event) {
var latlng = event.latLng; /* ← クリックされたマーカーの緯度・経度 */
});

　
他にも event オブジェクトのプロパティはあるらしいのだが
ブラウザ依存だそうで、ブラウザによって異なる。

そのため使い辛いようだ。

よって、上述の latLng プロパティですら

var latlng = event.latLng;
とはせずに
var latlng = this.getPosition();

という記述を奨める記事があった。
おやじプログラマー日記：「GoogleMap API V3」の使い方その４（イベント）

Google Maps JavaScript API V3 | 2011-07-22 (金) 22:21:39 |

Comments (0)

マーカーとバルーン

Posted by muchag | Google Maps JavaScript API V3 | 2011-07-22 (金) 10:36:41

クロージャ・・・何となく使えるようになった思っていたのは
気のせいだったらしい。

何度もやり直した。
まだまだまだまだだ。

新しい記事

infoWindow 複数配置
けど、こっちが不要かどうかは未精査。

１個設置

function initialize() {
/* マップ */
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(35, 139), // 適当
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/* マーカー */
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.362873, 138.731567),
map: map,
});
/* バルーン */
var infowindow = new google.maps.InfoWindow({
content: "富士山"
});
infowindow.open(marker.getMap(), marker);
}

クリックイベント

上の例だと最初からバルーンが表示されているので
マーカーをクリックしたらバルーンが表示されるタイプに改変。
　

function initialize() {
/* マップ */
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(35, 139), // 適当
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/* マーカー */
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.362873, 138.731567),
map: map,
});
/* バルーン */
- var infowindow = new google.maps.InfoWindow({
- content: "富士山"
- });
- infowindow.open(marker.getMap(), marker);
+ google.maps.event.addListener(marker, 'click', function(event) {
+ var infowindow = new google.maps.InfoWindow({
+ content: "富士山"
+ });
+ infowindow.open(marker.getMap(), marker);
+ });
}

複数設置

問題はここから。

マーカーを複数設置するのは問題なし。

でも、そのマーカーのクリックイベントリスナーを
前述の例の如く設定すると、どこをクリックしても
最後のマーカーが反応してしまう。

そこでイベントリスナーは関数にして
外へ出す。
　

function initialize()
{
/* マップ */
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(35, 139), // 適当
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var data = new Array();
data.push({lat: 35.362873, lng: 138.731567, content: "富士山"});
data.push({lat: 34.295929, lng: 132.319870, content: "厳島神社"});
data.push({lat: 43.366375, lng: 142.340302, content: "ラベンダーの森"});
for (var i = 0; i < data.length; i++) {
/* マーカー */
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].lat, data[i].lng),
map: map,
});
/* バルーン */
var htmlContent = "<dl><dt>" + data[i].content + "</dt><dd></dd></dl>";
attachMarkerClickEvent(marker, htmlContent);
}
}
function attachMarkerClickEvent(marker, htmlContent)
{
google.maps.event.addListener(marker, 'click', function(event) {
var infowindow = new google.maps.InfoWindow({
content: htmlContent
});
infowindow.open(marker.getMap(), marker);
});
}

これで無事に複数のマーカーとそれぞれのバルーンを設置できた。
　

バルーンの制御

しかし、このままだとバルーンが同時にいくつも表示されるし
１つのマーカーでもクリックするたびに同じ位置に新たにバルーンが表示されてしまうので
その辺を改良。
　

+var currentInfoWindow = null; /* 現在開いているバルーン格納変数 */
function initialize()
{
/* マップ */
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(35, 139), // 適当
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var data = new Array();
data.push({lat: 35.362873, lng: 138.731567, content: "富士山"});
data.push({lat: 34.295929, lng: 132.319870, content: "厳島神社"});
data.push({lat: 43.366375, lng: 142.340302, content: "ラベンダーの森"});
for (var i = 0; i < data.length; i++) {
/* マーカー */
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].lat, data[i].lng),
map: map,
});
/* バルーン */
var htmlContent = "<dl><dt>" + data[i].content + "</dt><dd></dd></dl>";
attachMarkerClickEvent(marker, htmlContent);
}
}
function attachMarkerClickEvent(marker, htmlContent) {
google.maps.event.addListener(marker, 'click', function(event) {
+ if (currentInfoWindow) currentInfoWindow.close();
var infowindow = new google.maps.InfoWindow({
content: htmlContent
});
infowindow.open(marker.getMap(), marker);
+ currentInfoWindow = infowindow;
});
}

１行目

１行目で、現在開いているバルーンを格納する変数を定義。
　

35行目

35行目で、現在開いているバルーンがあれば
まず閉じる。
　

42行目

42行目で新たに開いたバルーンを変数へ格納。
　

参考元サイト

なんちゃって☆めも：複数のgoogle.maps.Markerに吹き出しをつける
Google Maps 活用講座：Maps API v3でv2のように、1つだけの情報ウィンドウが開くようにする(1)

Google Maps JavaScript API V3 | 2011-07-22 (金) 10:36:41 |

Comments (0)

ブログ内検索

Main Menu

カテゴリー

最近のコメント

アーカイブ

メタ情報

ジオコーディング

event

マーカーとバルーン