カテゴリー
HTML JavaScript Webサイト作成

現在地の地図表示

Merry Christmas!

こんにちは、エムケーワイです。

前回JavaScriptを使った現在地の位置情報の取得と、緯度、経度、精度の表示を行いましたが、今回は現在地周辺の地図( Google map)の表示を行ってみます。

JavaScriptからGoogle mapを表示するには、Google Maps APIを使用しますが、APIキーの取得が必要です。このAPIキーの取得が結構面倒だったので、別記事にて手順を説明したいと思います。

なお、Google Maps APIの利用は有料で、クレジットカードの登録が必要です。ただし、90日間$300相当の無料トライアル期間があります。無料トライアル期間が終了しても勝手に有料にはならないようです。本サイトでは有料での利用は考えていないので、無料トライアル期間が終了すると、本記事の地図表示はできなくなると思われます^_^;

では、説明に移ります。今回も最初に実際の動作を確認していただき、その後実現方法の説明を行います。

目次 [閉じる]
  1. 現在地の位置情報の取得と地図表示
  2. HTMLコード
  3. JavaScriptコード
  4. CSS設定
  5. まとめ

1. 現在地の位置情報の取得と地図表示

前回と同じく下の「現在地を取得」ボタンのクリックにより、現在地の位置情報を取得し、緯度、経度、精度を表示した上で現在地周辺のGoogle mapを表示します。下図のようなメッセージが表示されたら「許可する」をクリックしてください(下図はFirefoxの例です)。

無料トライアル期間が終了したため、地図表示ができなくなりました。悪しからずご了承ください。

現在地は

 緯度:°

 経度:°

 精度(半径):m

です。

2. HTMLコード

今回作成したHTMLコードは下記の通りです。

<section class="mkyPosSection">
    <input type="button" value="現在地を取得" id="button1">
    <div class="mkyPosInfo">
        <p>現在地は</p>
        <p> 緯度:<span id="pos1" class="mkyPosition"></span>°</p>
        <p> 経度:<span id="pos2" class="mkyPosition"></span>°</p>
        <p> 精度(半径):<span id="pos3" class="mkyPosition"></span>m</p>
        <p>です。</p>
    </div>
    <div id="googleMap" style="width:100%; height:300px;"></div>
</section>

<script defer="" src="https://maps.googleapis.com/maps/api/js?key=[API key]" type="text/javascript"></script>

下の方の地図表示領域を定義しているコードと、Google Maps APIを読み込むコード以外は「位置情報の取得」と同じなので、今回追加されたコードについてのみ説明します。

2-1. 地図表示領域の定義

地図表示領域を定義しているのは下記のコードです。

<div id="googleMap" style="width:100%; height:300px;"></div>
  • 地図(Google map)を表示する領域をdivタグで囲みます。idはJavaScriptで使用します。また、style属性で幅と高さを設定しています。

3-2. Google Maps APIの読み込み

Google Maps APIの読み込みを行うのは下記のコードです。

<script defer="" src="https://maps.googleapis.com/maps/api/js?key=[API key]" type="text/javascript"></script>
  1. defer属性を指定することで、JSファイルが非同期に読み込まれ、HTMLのパース完了後に実行されます。JSファイルの読み込み、実行によるHTMLメインコンテンツの読み込み遅延を軽減するための対策です。
  2. src属性内の[API key]の部分に取得したAPIキーを挿入します。

3. JavaScriptコード

今回作成したJavaScriptコードは下記の通りです。

<script>
'use strict';

function success(pos) {
    const lat = pos.coords.latitude;
    const long = pos.coords.longitude;
    const accuracy = pos.coords.accuracy;

    document.getElementById('pos1').textContent = lat;
    document.getElementById('pos2').textContent = long;
    document.getElementById('pos3').textContent = accuracy;

    // 緯度、経度
    const posData = new google.maps.LatLng(lat, long);
    // マップオプション
    const mapOption = {
        zoom: 15,          // 倍率
        center: posData    // 緯度、経度
    };
    // マップオブジェクト作成       
    const gMap = new google.maps.Map(
        document.getElementById('googleMap'),    // 対象要素
        mapOption    // マップオプション
    );
    // マーカー表示
    const marker = new google.maps.Marker({
        map: gMap,            // マップオブジェクト
        position: posData,    // 緯度、経度
    });
}

function fail(error) {
    alert('現在地の取得に失敗しました。エラーコード:' + error.code);
}

document.getElementById('button1').onclick = function() {
    navigator.geolocation.getCurrentPosition(success, fail);
    this.blur();
}
</script>

JavaScriptコードも関数success()に地図表示用のコードが追加された以外は「位置情報の取得」と同じです。今回追加されたコードについてのみ説明します。

3-1. 地図(Google map)の表示

地図(Google map)の表示を行うコードを改めて示します。

// 緯度、経度
const posData = new google.maps.LatLng(lat, long);
// マップオプション
const mapOption = {
    zoom: 15,          // 倍率
    center: posData    // 緯度、経度
};
// マップオブジェクト作成       
const gMap = new google.maps.Map(
    document.getElementById('googleMap'),    // 対象要素
    mapOption    // マップオプション
);
// マーカー表示
const marker = new google.maps.Marker({
    map: gMap,            // マップオブジェクト
    position: posData,    // 緯度、経度
});
  1. 定数posDataに緯度と経度を格納します。具体的にはgoogle.maps.LatLngクラスのオブジェクト(posData)を作成し、その引数として緯度(lat)と経度(long)を渡しています。
  2. 定数mapOptionにマップオプションを格納します。zoomは表示倍率で、数値が大きくなるほど倍率が大きく(表示範囲が狭く)なります。15は通りが表示されるレベルです。centerは表示の中心位置で、posData(LatLngクラスオブジェクト)を指定します。
  3. マップオブジェクトを作成し、地図を表示します。具体的にはgoogle.maps.Mapクラスのオブジェクト(gMap)を作成し、その引数として地図表示の対象要素とマップオプションを渡しています。地図表示の対象要素はid”googleMap”を持つdiv要素です。
  4. 地図に現在地のマーカーを表示します。具体的にはgoogle.maps.Markerクラスのオブジェクトを作成し、その引数としてmapにはgMap(Mapクラスオブジェクト)、positionにはposData(LatLngクラスオブジェクト)を指定しています。

Maps JavaScript APIガイドによると、マップオプションのzoomと表示レベルの関係は下記の通りです。

1World
5Landmass/continent
10City
15Streets
20Buildings

4. CSS設定

今回HTMLコードに追加したid”googleMap”を持つdiv要素については、インラインでスタイルを設定しているので、CSS設定については「位置情報の取得」とほぼ同じです。クラス”mkyPosSection”(位置情報および地図表示に関連する要素全体を囲むsection要素)に対するパディングの設定のみ、右パディング量を0から1remに修正しています。

一応CSS設定を下記に示しておきますが、上記パディング設定以外の詳細は「位置情報の取得」をご参照ください。

.mkyPosSection {
    background-color: white;
    margin-top: 50px;
    margin-bottom: 30px;
    padding: 3rem 1rem 3rem 1rem;
    color: #444444;
}

.mkyPosInfo {
    margin: 30px 10px 10px 10px;
}

.mkyPosition {
    font-weight: bold;
    color: red;
}

5. まとめ

今回はJavaScriptを使った現在地の位置情報の取得に加え、現在地周辺の地図(Google map)表示にトライしてみました。

JavaScriptからGoogle mapを表示するには、Google Maps APIを使用しますが、APIキーの取得が必要です。

APIの取得は結構面倒でしたが、HTMLコードやJavaScriptコードについてはMaps JavaScript APIガイド等を参照して比較的容易に作成することができました。さすがGoogle。ドキュメントが充実していると感じました。

ただ、Google Maps APIの利用は有料です。現在は無料トライアル期間(90日間$300相当)ですが、有料での利用は考えていないので、無料トライアル期間が終了すると、本記事の地図表示はできなくなると思われます。それでも実装方法は有効だと思いますので、悪しからずご了承ください。

最後までお読みいただきありがとうございました。