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 を起動してバグを特定して修正