google map でブラウザから取得した緯度経度をもとに地図を表示

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 で現在地の地図を表示

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 で住所から算出された緯度経度をもとに地図を表示

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 でフォームのボタンを押したときに起動される関数の作成

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 で住所を入力して地図を移動

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"を示す