Google Maps API の使い方　入門編【JS】

JavaScript
2024.07.15

※この記事にはプロモーションが含まれています。

今回はGoogle Maps API の使い方の基本を学んでいきたいと思います。

Google Maps API を使うと何ができるのですか？

自分で作ったシステムにGoogleマップの機能が使えるようになりますよ。

Google Maps API とは

　Google Maps APIは、Googleが提供する一連のWebサービスで、世界中の地図データを扱っているGoogleMapsの機能を自分のアプリケーションに組み込むことができます。

Google Maps Platform - Location and Mapping Solutions
Create real world and real time experiences for your customers with dynamic maps, routes & places APIs from Google Maps ...
mapsplatform.google.com

Google Maps APIを使用するための準備

　まず最初に、上記の公式サイトにアクセスして下記の画面の「使ってみる」をクリックします。

  • アカウントを作成して、必要情報を入力して新規プロジェクトを作成します。このときGoogle Maps API の利用は一ヶ月の無料枠を超えると従量課金なので支払い情報も入力することになります。
  • APIキーの取得を確認します。APIキーが発行されてなければ下記の手順に従ってAPIキーを取得して下さい。

　「鍵と認証情報」をクリックします。

「APIキー」を押すとAPIキーが発行されますので、安全な場所に保存して下さい。

  • 今回使用するAPIの Maps JavaScript API が有効になっているか確認します。

　「ナビゲーションメニュー」➡「APIとサービス」➡「ライブラリ」➡「Maps JavaScript API」

　これで事前の準備は完了です。







地図の表示

　最初にWebブラウザにHTML、CSS、JavaScriptを使って地図を表示させるだけのコードを書いてみます。

HTMLの設定

　まず、index.htmlを作成して下記のコードを記述します。その後に同じディレクトリ内にstyle.css、index.jsを作成し、それぞれのファイルを読み込みます。YOUR_API_KEYには先に取得したあなたのAPIキーを設定して下さい。また、APIキーは間違って公開したりしないよう、取り扱いには十分注意して下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps Display</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="index.js"></script>
</body>
</html>

CSSの設定

　ここではブラウザに表示させる地図画面の大きさを設定します。

/* HTMLとBODYを全画面表示に設定 */
 body, html {
    height: 100%;
    margin: 0;
    padding: 0;
  }
/* 地図のサイズを指定 */
#map {
    height: 100%;
  }

JavaScriptの設定

　地図の中心をニューヨーク（緯度：40.7128 経度：-74.0060）としてブラウザに表示させるだけの関数 initMap( )を設定します。

// 地図を初期化する関数
function initMap() {
  // 地図の中心を設定（ここではニューヨーク）
  let myLatLng = new google.maps.LatLng(40.7128, -74.0060);
  // 地図の作成
  let map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10, // ズームレベル
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true
  });
}
initMap()

　※こちらの地図は通常のGoogle Mapsをイメージとして掲載しています。

　google.maps.LatLngクラスによって地図の緯度と経度を変数 myLatLng に代入します。そしてその後に、地図を表示させるクラスgoogle.maps.Mapに myLatLng を渡して必要情報を設定していきます。


　もしある地点の緯度、経度を調べたいときは、インターネット検索をしてGoogle Mapsで地図を表示させた後に調べたい地点を右クリックするとその地点の緯度、経度がポップアップに表示されます。

地図の拡大率であるズームレベル

　ズームレベルを調べたいときは上記と同様にインターネット検索してGoogle Mapsで地図を表示させた後にアドレスバーに表示されているURLの緯度、経度の部分の末尾にズームレベルが表示されます。

/maps/@40.6970193,-74.4576419,10z?entry=ttu 　ここ！

地図の種類を決める

　地図の種類を設定するにはgoogle.maps.MapTypeIdを使用します。下記の表は、地図の種類を示した一覧です。

地図の種類詳　細
ROADMAP通常の道路地図 デフォルトの地図タイプ
SATELLITE衛星画像を表示
HYBRID衛星画像に道路情報やラベルを重ね合わせた地図
TERRAIN地形地図 地形や標高の変化が表示

　また地図の種類は、地図を立ち上げた際に、デフォルトでは地図タイプを切り替えるボタンが表示されて手動で種類を切り替えることができますが、もしプログラム上、種類を切り替えて欲しくない場合は、mapTypeControlをfalseに設定すると切り替えボタンが表示されなくなります。



地図にマーカーをつける

　関数 initMap( )に追記します。

let marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello New York!'
});

　google.maps.Markerオブジェクトのpositionにはマーカーを実際に置く場所の緯度と経度の情報を渡します。そしてtitleには、マーカーにカーソルがホバーしたときに表示されるテキストを設定することができます。mapには上記で設定した地図情報を渡します。

複数の地点にマーカーをつける

　次は複数の地点にマーカーをつける方法です。最初に地図の中心(center)を設定するところは上記と同じですが、マーカーをつける地点配列 locations を作成し、JavaScriptのforEach文で各要素を順番にgoogle.maps.Markerのオブジェクトでマーカーをつけていきます。

function initMap() {
    let myLatLng = new google.maps.LatLng(40.7128, -74.0060);
    let map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10, 
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: true
    });
    // マーカーの位置を配列で指定
    let locations = [
      { lat: 40.7128, lng: -74.0060, title: 'Hello New York!' }, // ニューヨーク
      { lat: 40.730610, lng: -73.935242, title: 'Hello Brooklyn!' }, // ブルックリン
      { lat: 40.758896, lng: -73.985130, title: 'Hello Times Square!' } // タイムズスクエア
    ];
    // 各位置にマーカーを追加
    locations.forEach(function(location) {
      new google.maps.Marker({
        position: new google.maps.LatLng(location.lat, location.lng),
        map: map,
        title: location.title
      });
    });
  }
// ページ読み込んだ後に地図を初期化
window.onload = initMap;

　onloadイベントによってページ全体が読み込まれた後に initMap( )を実行します。それによって必要な HTML 要素が確実に存在する状態で地図を初期化できます。

地図のデザインを変える

　プログラムで作成する地図のデザインは下記のスタイルリファレンスに従って設定することによって、自由にカスタマイズすることができます。

Maps JavaScript API のスタイル リファレンス  |  Google for Developers

変更できるスタイルの構成

　地図のデザインを変更する大まかな構成は下記の通りとなっています。

項目説　明
featureType地図上でスタイルを変更したい対象物。たとえば、道路、公園、水域など。
指定しないと、対象物のすべての要素が選ばれる。
elementType対象物の中の特定の要素。たとえば、ラベルやジオメトリ（形状）など。
指定しないと、対象物のすべての要素が選ばれる。
stylers選んだ対象物や要素に適用するルール。たとえば、色、見え方、厚さなど。
1つ以上のスタイルを対象物に適用できる（制限あり）。

　次のコードは、道路の色を赤に、水域の色を青に変更する例です。このstylesは地図を作成するgoogle.maps.Map( )のオプションに設定します。

// 道路と水域のスタイル設定を配列に格納する
styles:[
  {
    // 道路のスタイル設定
    featureType: 'road',        
    elementType: 'geometry',    
    stylers: [
      { color: '#ff0000' }      // 道路の色を赤色に変更
    ]
  },
  {
    // 水域のスタイル設定
    featureType: 'water',       
    elementType: 'geometry',    
    stylers: [
      { color: '#0000ff' }      // 水域の色を青色に変更
    ]
  }
];

　その他にも利用できる対象物やスタイルオプションがたくさんありますので、スタイルリファレンスを参考にカスタマイズしてみて下さい。

任意の地点に情報ウィンドウを表示する

　今度は任意の地点にマーカーを置き、情報ウィンドウが表示されるプログラムです。仮に「×」を押してウィンドウを閉じたとしても、マーカーをクリックすれば再度ウィンドウが立ち上がる仕様です。
　情報ウィンドウはHTMLで記述されるので、テキスト、リンク、画像はもちろん、ボタンなども設定することができます。

let myLatLng = new google.maps.LatLng(40.7128, -74.0060);
// 地図の作成
let map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10, // ズームレベル
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true
});
// 情報ウィンドウのHTMLコンテンツ
let infoWindowContent = `
    <div>
        <h1>New York City</h1>
        <p>This is New York City!</p>
        <p>
            <a href="https://en.wikipedia.org/wiki/New_York_City" target="_blank">
                Learn more about New York City
            </a>
        </p>
        <img src="sample.png" alt="sample" width="200">
    </div>
`;
// 情報ウィンドウを作成
let infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent,
    position: myLatLng // マーカーの位置を指定
});
// ページが読み込まれたら地図を初期化する関数
function initMap() {
    // 地図上に情報ウィンドウを表示
    infoWindow.open(map);
}
// マーカーをクリックしたときに情報ウィンドウを表示
let marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'New York City'
});
google.maps.event.addListener(marker, 'click',function() {
    infoWindow.open(map, marker);
});
// ページが読み込まれたら地図を初期化
window.onload = initMap;

　情報ウィンドウのHTMLコンテンツを変数 infoWindowContent に格納します。そして、情報ウィンドウを作成するgoogle.maps.InfoWindowのオブジェクトに infoWindowContent を渡して、さらに情報ウィンドウを表示する場所をpositionに設定します。ここでは、作成した地図のcenterと同じ場所に情報ウィンドウを作成するようにしています。

　その後にマーカーを地図上に作成してgoogle.maps.event.addListenerにクリックされるMarkerオブジェクトを渡してクリックイベントでgoogle.maps.InfoWindowのopenメソッドが発火するよう設定します。これによって、マーカーをクリックするたびに情報ウィンドウが開く仕組みです。

New York City

This is New York City!

Learn more about New York City

New York City

　今回作成した情報ウィンドウのイメージはこのような感じです。ちなみに、もちろんマーカーがなくとも情報ウィンドウのみを表示させることもできますし、複数設置することもできます。

2地点のルートを計算する

　2地点のルートを計算するにはMaps JavaScript APIを設定したプロジェクトでRoot Servicesの利用、即ちDirections APIが有効になっていることが必要です。詳しい確認方法はこちら

　まずここでは、出発点はニューヨーク市庁舎、到着点をフィラデルフィア市庁舎とし、ドライブモードで移動した場合のルートを計算、地図上に経路を表示させます。

function initMap() {
    let map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {lat: 40.7128, lng: -74.0060}
    });
    // DirectionsServiceオブジェクトの作成
    let directionsService = new google.maps.DirectionsService();

    // DirectionsRendererオブジェクトの作成
    let directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(map);

    // DirectionsRequest オブジェクトの作成
    let request = {
        origin: 'New York City Hall, New York, NY',
        destination: 'hiladelphia City Hall, Philadelphia, PA',
        travelMode: 'DRIVING'
    };
    // ルートの取得
    directionsService.route(request, function(result, status) {
        if (status === 'OK') {
            // ルートの描画
            directionsRenderer.setDirections(result);
        } else {
            console.error('Directions request failed due to ' + status);
        }
    });
}
window.onload = initMap;

　google.maps.DirectionsServiceは2つの地点間のルートを計算するためのサービスです。このオブジェクトは、出発地点、到着地点、移動手段（車、徒歩、自転車、公共交通機関など）などを指定してルートを計算し、結果を返します。requestには、出発地、目的地、移動手段、経由地点などを含めることができます。
　そして、google.maps.DirectionsRendererは地図上にルートを描画する機能を持っていて setMap( ) によって作成した地図情報と紐づけます。下記の表は主なrequestの内容についてです。

DirectionsRequest オブジェクト

オブジェクトリテラルフィールド値
originルートの出発地点住所（文字列）、座標（緯度と経度のオブジェクト）など
destinationルートの目的地住所（文字列）、座標（緯度と経度のオブジェクト）など
travelMode移動手段サポートしている文字列

移動手段

移動手段ルート
DRIVINGデフォルト 道路交通網
WALKING徒歩経路
BICYCLING自転車ルート
TRANSIT公共交通機関

　さらに詳細な設定として交通機関オプションや運転オプションなどを設定することができます。詳しくはRoot Servicesを参照して下さい。

　後は、routeメソッドによってrequestを送信して、ルート計算の結果を含むresultとrequestの可否情報を含むstatusを受け取り、directionsRenderer.setDirectionsによって地図上に結果を描画してプログラムは完成です。

※こちらの地図は通常のGoogle Mapsをイメージとして掲載しています。

おわりに

　今回はGoogle Maps API を使う上での基本的な機能について紹介してみました。まだまだGoogleMapsAPI の機能のごく一部であり、応用することによってさまざまなことに活用できそうです。
　最後までご覧頂きありがとうございました。







タイトルとURLをコピーしました