最初に
Geolocation API で位置情報を取得して GoogleMap にマーカーを表示するサンプルを作成しました。
この記事の続きとして書いています。
Geolocation APIでPCやスマホの位置情報を取得する
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>位置情報取得サンプル2</title>
<!-- 動作処理 -->
<script>
// 現在地取得処理
function initMap() {
// Geolocation APIに対応している
if (navigator.geolocation) {
// 現在地を取得
navigator.geolocation.getCurrentPosition(
// 取得成功した場合
function(position) {
// 緯度・経度を変数に格納
var mapLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// マップオプションを変数に格納
var mapOptions = {
zoom : 15, // 拡大倍率
center : mapLatLng // 緯度・経度
};
// マップオブジェクト作成
var map = new google.maps.Map(
document.getElementById("map"), // マップを表示する要素
mapOptions // マップオプション
);
// マップにマーカーを表示する
var marker = new google.maps.Marker({
map : map, // 対象の地図オブジェクト
position : mapLatLng // 緯度・経度
});
},
// 取得失敗した場合
function(error) {
// エラーメッセージを表示
switch(error.code) {
case 1: // PERMISSION_DENIED
alert("位置情報の利用が許可されていません");
break;
case 2: // POSITION_UNAVAILABLE
alert("現在位置が取得できませんでした");
break;
case 3: // TIMEOUT
alert("タイムアウトになりました");
break;
default:
alert("その他のエラー(エラーコード:"+error.code+")");
break;
}
}
);
// Geolocation APIに対応していない
} else {
alert("この端末では位置情報が取得できません");
}
}
</script>
</head>
<body>
<h1>位置情報取得サンプル2</h1>
<div id="map" style="width:400px; height:300px"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=【API-KEY】&callback=initMap"></script>
</body>
</html>
解説
前の記事のソースにGoogleMap表示に必要な処理を加えました。
マップを表示する要素を配置
まず、GoogleMapを表示する位置にdiv要素を配置します。
この要素には「ID」と「マップのサイズ」を設定してください。
<div id="map" style="width:400px; height:300px"></div>
GoogleMapsAPIの読み込み
次に、GoogleMapsAPIの読み込み処理を記述します。
URLの最後に callback=○○ と書くことによってスクリプト読み込み完了後に初期化関数(このサンプルではinitMap())を呼び出せるようになっています。
※【API-KEY】の部分には自分のAPIキーを入れてください。(APIキー取得にはGoogleMapsAPIの登録が必要)
<script src="https://maps.googleapis.com/maps/api/js?key=【API-KEY】&callback=initMap"></script>
ちなみに、JavaScriptファイル読み込み中はその先のページが読み込まれないため、読み込み処理を </body> の前に書いています。
async defer という属性を使ってスクリプトの読み込むタイミングを指定する方法もあるようですが、最後に書く方法の方が一般的なようだったのでこの方法を採用しました。
マップ初期化関数の作成
マップ初期化関数は前記事のソースに手を加えたものになっています。
変更箇所以外は前記事を参照ください。
function initMap() {
(中略)
}
マップオプション作成
現在地情報の取得に成功した後、マップ作成を行います。
まずは、マップオプションを変数に格納しておきます。
マップオプションには最低「拡大倍率」と「緯度・経度」を設定しておく必要があるようです。
緯度・経度は google.maps.LatLng クラスのオブジェクトを作り、それを設定します。クラスの引数には、「緯度」と「経度」を渡します。
// 緯度・経度を変数に格納
var mapLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// マップオプションを変数に格納
var mapOptions = {
zoom : 15, // 拡大倍率
center : mapLatLng // 緯度・経度
};
マップを表示
次に、 google.maps.Map クラスのオブジェクトを作成します。
このオブジェクトを作成することでマップが表示されます。作成したオブジェクトはマップを操作するためにも使います。
クラスの引数には、「マップを表示する要素」と「マップオプション」を渡します。
// マップオブジェクト作成
var map = new google.maps.Map(
document.getElementById("map"), // マップを表示する要素
mapOptions // マップオプション
);
マップにマーカーを表示
最後に、 google.maps.Marker クラスのオブジェクトを作成します。
このオブジェクトを作成することでマップにマーカーが表示されます。作成したオブジェクトはマーカーを操作するためにも使います。
クラスの引数には、「 google.maps.Map クラスオブジェクト」と「 google.maps.LatLng クラスオブジェクト」を渡します。
// マップにマーカーを表示する
var marker = new google.maps.Marker({
map : map, // Mapクラスオブジェクト
position : mapLatLng // LatLngクラスオブジェクト
});