カテゴリー: Google Maps

google map でブラウザから取得した緯度経度をもとに地図を表示
#18 現在地の地図を表示する (2)
http://dotinstall.com/lessons/basic_google_maps/3518
を参考に
ブラウザから取得した緯度経度をもとに地図を表示
まず
if(navigator.geolocation){
で対応できているのなら
現在地の取得をする
現在地を取得するには
navigator.geolocation.getCurrentPosition(function(position){
取得できたときの処理
},
function(){
取得できなかったときの処理
});
とする
大抵の場合取得できないのなら
エラー表示するので
alert(“現在地が取得できませんでした”);
というようにする
取得できたときの処理は
var map = new google.maps.Map(document.getElementById(‘map’), options);
で設定したmap の center の値と function(position)の値
を使う
map.setCenter(
new google.maps.LatLng(position.coords.latitude,
position.coords.longitude));
map.setCenter() は表示する地図の中心座標の設定
ここの値を
new google.maps.LatLng() で
設定している
このLatLng() には緯度経度を指定する
position.coords.latitude が
positionで返ってきた現在地の緯度
position.coords.longitude が
positionで返ってきた現在地の経度
latitude が英語で緯度
longitude が英語で経度
という意味
ここまでできたら、動作確認
私の場合、Ubuntuなので
mkdir /var/www/gmap
でここに index.html をコピー
あとは
apache2 を
sudo service apache2 start で起動して
ifconfig でIPを確認して
iPod touch で
ipアドレス/gmap
でアクセスして動作確認
もし、うまくいかないのなら
PC で chrome で Ctrl + shift + j
でdeveloper tools を起動してバグを特定して修正

google map で現在地の地図を表示
#17 現在地の地図を表示する (1)
http://dotinstall.com/lessons/basic_google_maps/3517
を参考に現在地の地図を表示
マッシュアップアプリの場合
これが一番使うと思う
現在地の情報を取得するのに一番使うのは
旅行や出張などで知らない場所に行ったとき
食べログとかじゃらんで探してもいいけど
APIを活用することで
地図上に現在営業していて予算範囲内で
近いお店だけ表示ということも可能になる
これには
HTML5のgeolocationを使い、
現在地の地図を表示する
ちなみに、応用で yahoo地図でもできたりする
ドットインストールによれば
firefox の場合
https://developer.mozilla.org/ja/Using_geolocationro
を参照とのこと
HTML５のAPIの場合
iPhone の Safari が一番動きやすい
Android や PC ブラウザの場合
動いたり動かなかったりとあるので注意
ちなみに、今回はサーバーに設置が必要
今回はブラウザとして chromeを使用
まずHTML５の
navigator.geolocation 対応か
if で判定する
もし、非対応のブラウザなら、メッセージを表示して
対応ブラウザを使ってもらう
if(navigator.geolocation){
対応時の処理
}else{
alert(“chrome などをお使いください”);
}
というように
else の分岐のほうで非対応の対策を記述する

google map で住所から算出された緯度経度をもとに地図を表示
#16 住所を入力して地図を移動させる (3)
http://dotinstall.com/lessons/basic_google_maps/3516
を参考に
住所から算出された緯度経度をもとに地図を表示
この機能はいろいろと施設検索に使える
また、周辺情報を取得し
目的地の情報を得るために
他のAPI と組み合わせるのもおもしろいと思う
住所は result で帰ってくるので
それにあわせてマップの移動を行う
今回は panTo() を使うことで
移動先の地点が
すでに地図上で表示されている場合に
スムーズに移動するようになる
この panTo() は緯度経度を引数にとるので
map.panTo(result[0].geometry.location);
とすればOK
この追記する場所は
if のエラー判定で、成功した場合の処理として追記する
if(status == google.maps.GeocoderStatus.OK){
map.panTo(result[0].geometry.location);
}else{
alert(“error !”);
}
というようになる
とりあえず
これで動作確認のため
入力欄に適当に住所を入力
するとその場所まで地図が移動する
また、さらにわかりやすくするため
マーカーを設置
var marker = new google.maps.Marker({
position: result[0].geometry.location,
map: map
});
これを追記すれば
入力した住所にマーカーが設置される
position: result[0].geometry.location
は、マーカーの設置場所で
result[0].geometry.location
が入力した住所のこと
result に格納されているのでそれを指定している
map : map
は、どこに設置するかという対称を指定
値のmap は
var map = new goole.maps.Map(document.getElementById(‘map’), options);
で指定した map になる
この marker の設定を
var panTo(result[0].geometry.location);
の下に追記して
再度読み込むと
住所にマーカーが設置される

google map でフォームのボタンを押したときに起動される関数の作成
#15 住所を入力して地図を移動させる (2)
http://dotinstall.com/lessons/basic_google_maps/3515
を参考に
フォームのボタンを押したときに起動される関数
moveMap() の作成
処理内容は
ボタンクリック時のイベント作成と
入力された住所をもとに、geocoder を起動すること
function moveMap(){
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
‘address’: document.getElementById(‘address’).value
},
function(result, status){
if(status == google.maps.GeocoderStatus.OK){
}else{
alert(“Error”);
}
});
}
今回使用するオプションは住所を入力するので
address: を使う
値は
document.getElementById(‘address’).value
とする
この address は
input type=”text” id=”address”
とした入力欄のこと
.value は
入力した内容
つまり住所になる
if(status == google.maps.GeocoderStatus.OK){
}else{
alert(“Error”);
}
これは、マップのエラー処理を if で判定している

google map で住所を入力して地図を移動
#14 住所を入力して地図を移動させる (1)
http://dotinstall.com/lessons/basic_google_maps/3514
を参考に
フォームに入力された住所をもとに地図を表示
やはり検索欄から地図を探すのが一番多そう
ちなみに、今回は新しいマップをつくる
まずは、フォームの設置から
<p><input type=”text” id=”address” value=””>
<input type=”button” value=”表示” onclick=”moveMap();”>
</p>
とする
入力欄の input 要素に id をつけ
button のほうには java script の
ユーザ関数 moveMap() をクリックしたときの動作にする
次に、現在地図の大きさが css で
#map{
witdh :100%;
height: 100%;
}
だけど、これだと不具合がでるので
height:80%;
ぐらいにしておく
次に script 要素に地図の設定を記述
var latlng = new google.maps.LatLng(35.66, 139.69);
これで緯度経度指定
var options = {
zoom:15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
これで表示のため必須オプションを変数格納
zoom はズームレベル
center は地図の中心座標
mapTypeId はどのタイプの地図にするか指定
var map = new google.maps.Map(document.getElementById(‘map’), options);
で実際に地図を描画
document.getElementById(‘map’)
は
id=”map”を示す

google map でマーカーの情報ウィンドウに住所を表示
#13 クリック位置の住所を表示する (3)
http://dotinstall.com/lessons/basic_google_maps/3513
を参考に
マーカーの情報ウィンドウに住所を表示
今後の使い道は
ナビとかに使えそう
また、geocode そのものも使い道はたくさんある
緯度経度をもとに
result , status の値が帰ってきているので
これらを使い処理していく
if(status == google.maps.GeocoderStatus.OK){
で成功したときの処理を追記
var infoWindow = new google.maps.InfoWindow({
content: result[0].formatted_address
});
infoWindow(open, marker);
content : には、取得した住所にするので
content: result[0].formatted_address
とする
情報ウインドウは、open()で表示する
このとき
open(map, marker)
というようにすると、
マーカーをクリックしたときに情報ウインドウが開くようになる
map は
var map で指定した変数のことで
var map = new google.maps.Map(document.getElementById(‘map’),options);
が map を定義している部分
あと、formatted_address については
ドットインストールによれば
GeocoderResult のプロパティである formatted_address は
現在日本語のドキュメントには記載されていない
ということで
英語ドキュメントに掲載されている
https://developers.google.com/maps/documentation/javascript/reference?hl=en&csw=1#GeocoderResult
とりあえず、実行確認すると
クリックするとマーカーがでて住所も
表示される
facebook とか google twitter など
更新が早い企業の場合
web api 関連は英語がメインになるので
日本語訳をまつよりも英語の勉強をして
リファレンスを読めるようになったほうが効率的だし
書籍を買う費用も抑えられる

Geocoderを使ってクリック位置から住所を取得
#12 クリック位置の住所を表示する (2)
http://dotinstall.com/lessons/basic_google_maps/3512
を参考に
Geocoderを使ってクリック位置から住所を取得
今後はスマホタッチと組み合わせるとよいかも
とりあえず、マーカー表示ができたので
今回は
情報ウインドウを表示する
情報ウインドウを表示するときに
表示場所の指定に住所を使うので
Geocoder を使って取得する
なお Geocoder については
ソースの冒頭で
var geocoder = new google.maps.Geocoder();
としてあるので
そのまま使う
Geocoder を使うには
geocoder.geocode({
‘latLng’: event.latLng
},function(event,status){
});
前回は
‘address’:
だったので、住所を指定して
‘address’:’鹿児島県鹿児島市’
今回は緯度経度なので
‘latLng’: になる
‘latLng’: event.latLng
なら、クリックした緯度経度となる
function(result ,status){
}
の中でエラー処理も追記しておく
if(status == google.maps.GeocoderStatus
.OK){
}else{
alert(“エラー”);
}

google map でクリック位置の情報表示
#11 クリック位置の住所を表示する (1)
http://dotinstall.com/lessons/basic_google_maps/3511
を参考に
地図上でクリックした位置にマーカーを表示し、
その情報ウィンドウに住所を表示
これがあれば、迷ったときに使えるかもしれない
今回はマーカー表示
今回の場合
緯度経度から住所の取得
クリックしたところにマーカーが表示され
そこをクリックすると住所が表示されるというもの
流れとしては
地図にイベントを設定
クリックしたらマーカー表示
マーカーをクリックしたら
その緯度経度を元に情報ウインドウに
住所を表示する
というもの
前回、緯度経度から住所を算出し地図を表示したのを使い、これに今回の仕様を追加
ソースは
前回のものを使用する
http://dotinstall.com/lessons/basic_google_maps/3510
のソースを使用
追記するのは
var map = new google.maps.Map(document.getElementById(‘map’),options);
の後あたり
表示してステータスがOKならイベントを設定する
google.maps.event.addListener(map,’click’,function(event){
});
として
マップをクリックしたときにイベントがおきるようにセット
function(event) を使って緯度経度を取得し
マーカーを設置
var marker = new google.maps.Marker({
position: event.latLng,
map:map
});
position : はマーカーをセットする位置で
event.latLng はクリックしたときの座標
map : には、マーカーを設置する対象です
var map で設定した map になる
ここまでできたら動作確認
もし、動かない場合
まちがえやすいところとして
google.maps
を
google.map
にしているというミスに注意

geocoderで算出した緯度経度で地図表示
#10 住所から緯度経度を算出する (2)
http://dotinstall.com/lessons/basic_google_maps/3510
を参考に
住所から算出された緯度経度を使い、地図を表示
地図を表示するには
if() 判定の成功だったときの処理のところに
var latlng = result[0].geometry.location;
var options ={
map
zoom:15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};)
var map = new google.maps.Map(document.getElementById(‘map’),options);
とする
今までは
var latlng = new google.maps.Latlng();
で緯度経度指定していたけど
今回は
var latlng = result[0].geometry.location;
としている
result は geocode() で帰ってきた値
変化をつけて結果確認したいのなら
adress : ” の中身の住所を変えるとわかりやすい

Geocodingを使い、住所から緯度経度を算出
#09 住所から緯度経度を算出する (1)
http://dotinstall.com/lessons/basic_google_maps/3509
を参考に
Geocodingを使い、住所から緯度経度を算出
Geocoderクラスのリファレンスは
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#Geocoder
また
GeocoderStatus のOK以外のステータスについては
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#GeocoderStatus
を参照
まずは Geocoder を準備
これは
通常
var latlng = new google.maps.Latlng(緯度, 経度);
としても、緯度経度の把握はできないから
なので
Geocoding により
住所から緯度経度の算出を行う
これは google API を使うことでできる
住所から緯度経度の算出をするには
var geocoder = new google.maps.Geocoder();
でオブジェクト作成
geocoder.geocode(
{
オプションを指定
},
function(){
行う処理
})
となる
geocoder() は返り値として
result
status
という値を持ってくるので
function() { }
の中で、これらを元に行う処理を記述する
オプションには、今回
address: ‘東京都目黒区’
というように
address: ‘住所’
を指定
function(){ }
で行う処理は
if(status == google.maps.GeocoderStatus.OK){
}else{
alert(‘エラーです’);
}
として
エラー処理をできるようにしている