Categories: サービス

Google Maps APIの使い方完全ガイド｜地図の埋め込みからカスタマイズまで徹底解説

Google Maps（グーグルマップ）をWebサイトやアプリに組み込んで、オリジナルの地図を表示したり、現在地の取得やルート案内をしたいと考えたことはありませんか？
そのような機能を実現するのが「Google Maps API（Application Programming Interface）」です。

この記事では、Google Maps APIの導入手順から、HTMLページでの地図表示、マーカーや情報ウィンドウの設置、APIキーの取得方法までを初心者向けにわかりやすく解説します。
実際のコードサンプルも豊富に掲載しているので、これからGoogleマップを使って開発を始めたい方は、ぜひ最後までご覧ください。

Google Maps APIとは？
APIキーの取得方法と使用準備
基本的な地図表示のHTMLコード
マーカーと情報ウィンドウを追加する方法
複数のマーカーを表示する
地図のデザインをカスタマイズする
現在地を取得して地図に表示する
注意点と利用制限

Google Maps APIとは？

Google Maps APIは、Googleが提供する地図サービスをWebサイトやアプリケーションで利用できる開発者向けのツールです。
JavaScriptやHTTPリクエストを使って地図を表示したり、ルート検索、現在地の取得、マーカーの配置など、様々な機能を実装できます。

主な機能：

地図の表示（カスタマイズ可能）
複数地点のマーカー表示
情報ウィンドウ（吹き出し）の表示
現在地取得
距離・ルートの計算

APIキーの取得方法と使用準備

Google Maps APIを使うには、Google Cloud Platform（GCP）でプロジェクトを作成し、APIキーを取得する必要があります。

ステップ1：Google Cloud Consoleにアクセス

https://console.cloud.google.com/ にアクセスし、Googleアカウントでログイン。

ステップ2：新しいプロジェクトを作成

上部の「プロジェクトを選択」→「新しいプロジェクト」
名前を入力して作成

ステップ3：APIライブラリを有効化

メニュー > 「APIとサービス」 > 「ライブラリ」
「Maps JavaScript API」と検索し、有効化

ステップ4：APIキーを発行

メニュー > 「認証情報」 > 「認証情報を作成」 > 「APIキー」
表示されたキーをコピー（このキーをHTMLに埋め込みます）

※セキュリティのため、リファラ制限などを設定しておきましょう。

基本的な地図表示のHTMLコード

APIキーを取得したら、以下のようにHTMLとJavaScriptで地図を表示できます。

<!DOCTYPE html>
<html>
  <head>
    <title>シンプルな地図表示</title>
    <style>
      #map {
        height: 500px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h3>Google Mapを表示するサンプル</h3>
    <div id="map"></div>

    <script>
      function initMap() {
        const location = { lat: 35.6895, lng: 139.6917 }; // 東京
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 12,
          center: location,
        });
        const marker = new google.maps.Marker({
          position: location,
          map: map,
        });
      }
    </script>

    <script async
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

※YOUR_API_KEYを実際に取得したキーに置き換えてください。

マーカーと情報ウィンドウを追加する方法

地図に場所のピン（マーカー）を表示したい場合、google.maps.Markerを使います。さらに、クリック時に情報を表示するにはgoogle.maps.InfoWindowを活用します。

const infoWindow = new google.maps.InfoWindow({
  content: "<h4>ここが東京です</h4>",
});

const marker = new google.maps.Marker({
  position: location,
  map: map,
  title: "東京",
});

marker.addListener("click", () => {
  infoWindow.open(map, marker);
});

このコードをinitMap関数内に追加すると、マーカーをクリックしたときに吹き出しが表示されるようになります。

複数のマーカーを表示する

複数地点をまとめて表示するには、配列でデータを管理すると便利です。

const locations = [
  { lat: 35.6895, lng: 139.6917, name: "東京" },
  { lat: 34.6937, lng: 135.5023, name: "大阪" },
  { lat: 43.0667, lng: 141.3500, name: "札幌" },
];

locations.forEach((loc) => {
  const marker = new google.maps.Marker({
    position: { lat: loc.lat, lng: loc.lng },
    map: map,
    title: loc.name,
  });
});

地図のデザインをカスタマイズする

Google Mapsでは、スタイルのカスタマイズが可能です。下記のように配色やラベルの表示を変えることができます。

const styledMapType = new google.maps.StyledMapType(
  [
    {
      featureType: "all",
      elementType: "labels",
      stylers: [{ visibility: "off" }],
    },
    {
      featureType: "road",
      elementType: "geometry",
      stylers: [{ color: "#000000" }],
    },
  ],
  { name: "カスタムスタイル" }
);

map.mapTypes.set("styled_map", styledMapType);
map.setMapTypeId("styled_map");

現在地を取得して地図に表示する

ブラウザのGeolocation APIを使って、現在地を取得して地図に反映することも可能です。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const userLocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      };
      map.setCenter(userLocation);
      new google.maps.Marker({
        position: userLocation,
        map: map,
        title: "現在地",
      });
    },
    () => {
      alert("位置情報の取得に失敗しました");
    }
  );
}