とほほのGoogle Maps API入門

Google Maps API とは
標準版とプレミアム版
Googleアカウントを得る
APIキーを得る
Google Maps JavaScript API
Google Static Maps API
Google Maps Embed API
Google Maps Geocoding API
リンク

Google Maps API とは

Google Maps, Google Street View, Google Places と連動して地図情報等を参照・操作することのできる、下記などの API サービスの総称です。

https://developers.google.com/maps/

カテゴリ	サービス	説明
Android	Google Maps Android API	Android アプリから Google Maps を利用するための Java API。
Android	Google Places API for Android	Android アプリから Google Places を利用するための Java API。
iOS	Google Maps SDK for iOS	iOS アプリから Google Maps を利用するための Objective-C / Swift API。
iOS	Google Places API for iOS	iOS アプリから Google Places を利用するための Objective-C / Swift API。
Web	Google Maps JavaScript API	ブラウザから Google Maps を利用するための JavaScript API。
	Google Static Maps API	ブラウザから <img> 等で Google Maps を利用するための URI 形式の API。
	Google Street View Image API	ブラウザから Google Street View を利用するための URI 形式の API。
	Google Maps Embed API	ブラウザから <iframe> 等で Google Maps を利用するための URI 形式の API。
Web Service	Google Maps Directions API	2地点間のルートを検索する REST API。
	Google Maps Directions Matrix API	2地点間のルートの時間と距離を検索する REST API。
	Google Maps Elevation API	指定した地点の標高を求める REST API。
	Google Maps Geocoding API	住所から緯度経度、または緯度経度から住所を求める REST API。
	Google Maps Geolocation API	携帯電話の基地局IDや WiFi の Mac アドレスから緯度経度を求める REST API。
	Google Maps Roads API	位置情報を道路上の位置に補正し、その場所を制限速度を求めることができる REST API。
	Google Maps Time Zone API	位置情報と時刻から、該当地域のタイムゾーン情報を求める REST API。
	Google Places API Web Service	Google Places を利用するための REST API。

標準版とプレミアム版

Google Maps API には「標準版」と「プレミアム版」があります。「標準版」は、完全無料のものや、1,000回/日まで無料のもの、90日間連続で 25,000回/日を超えるまで無料、超過分に課金など、サービスによって異なります。「プレミアム版」は、24時間サポート付きで必要量に応じて課金されます。商用利用であっても「標準版」を利用することができますが、誰でもアクセスできるページであることが条件で、社員や会員のみがアクセスするページで利用することはできません。無料枠を超えた超過分は、アクセスできなくなる訳ではなく、後日請求されることもありますので、利用量には注意してください。超過しないように、上限を設定することも可能です。詳細は下記を参照してください。

https://developers.google.com/maps/pricing-and-plans/

カテゴリ	サービス	標準版
Android	Google Maps Android API	無料
Android	Google Places API for Android	1,000回/日まで無料。クレジットカード登録後は 150,000回/日まで無料。
Android	Google Maps SDK for iOS	無料
Android	Google Places API for iOS	1,000回/日まで無料。クレジットカード登録後は 150,000回/日まで無料。
Web	Google Maps JavaScript API	90日間連続して 25,000回/日を超えるまで無料。超過分は 1,000回毎に $0.50USD 課金。最大 1,000,000回/日。
	Google Static Maps API
	Google Street View Image API
	Google Maps Embed API	無料
Web Service	Google Maps Direction API	2,500回/日まで無料。超過分は 1,000回毎に $0.50 USD 課金。最大 100,000回/日。
	Google Maps Directions Matrix API
	Google Maps Elevation API
	Google Maps Geocoding API
	Google Maps Geolocation API
	Google Maps Roads API
	Google Maps Time Zone API
	Google Places API Web Service	150,000回/日まで無料。クレジットカードによる本人確認が必要。

Googleアカウントを得る

まず、Google アカウントが必要です。取得していない人は下記から取得してください。

https://myaccount.google.com/

[GOOGLEアカウントを作成] をクリックする。
[名前], [ユーザ名], [パスワード], [生年月日], [性別], [携帯電話], [現在のメールアドレス] などを入力し、[次のステップ] を押す。
https://myaccount.google.com/ からログインすることでアカウントの情報を管理することができます。

APIキーを得る

Google Developers Console でプロジェクトを作成し、API キーを得る必要があります。

https://console.developers.google.com/

[Google APIを利用する] をクリックする。
[プロジェクト名] にプロジェクト名(例:Test1)を入力し、利用規約に同意して [作成] ボタンを押す。
[API Manager] 画面から、必要な API (例: Google Maps JavaScript API) をクリックする。
[APIを有効にする] をクリックする。
[認証情報に進む] をクリックする。
[使用するAPI] で Google Maps JavaScript API を選択し、[APIを呼び出す場所] に「ウェブブラウザ(JavaScript)」を指定し、[必要な認証情報] をクリックする。
[名前] にキーの名前 (例:Key1) を入力する。
APIキーを特定のWebサイトでのみ使用する場合は、[このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる] に、www.example.com/* のようなサイトアドレスを指定してください。他のサイトで APIキーを悪用され、利用制限の超過を抑えるのに役立ちます。
[APIキーを作成する] をクリックする。
[完了] をクリックする。
ここで作成した APIキーをメモしておいてください。

Google Maps JavaScript API

JavaScript から Google Maps を利用します。

https://developers.google.com/maps/documentation/javascript/

下記のサンプルを許可されたドメインに設置してください。「YOUR_API_KEY」には取得したAPIキーを指定してください。

HTML

<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API</title>
<meta charset="utf-8">
<style>
#map1 {
  widht: 400px;
  height: 300px;
  border: 1px solid #999;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
  var latlng = { lat: 35.6585696, lng: 139.7454840 };
  map = new google.maps.Map(document.getElementById('map1'), {
    center: latlng,
    zoom: 18
  });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>

Google Static Maps API

URLにパラメータを加えて呼び出すことで静的画像を得ることができます。<img> などで使用することができます。/p>

https://developers.google.com/maps/documentation/static-maps/

「YOUR_API_KEY」には取得したAPIキーを指定してください。

HTML

<img id="map2" src="https://maps.googleapis.com/maps/api/staticmap?center=35.6585696,139.7454840&zoom=16&size=300x200&key=YOUR_API_KEY">

Google Maps Embed API

https://developers.google.com/maps/documentation/embed/

HTML

<iframe width="300" height="200" style="border: 1px solid #999"
  src="https://www.google.com/maps/embed/v1/place?q=%E5%93%81%E5%B7%9D&key=YOUR_API_KEY"
  allowfullscreen></iframe>

Google Maps Geocoding API

住所や施設名から緯度経度、または、緯度経度から住所や施設名を検索します。

Request

https://maps.googleapis.com/maps/api/geocode/json?address=住所&key=YOUR_API_KEY

Response

{
  "results" : [
    {
      "address_components" : [
        {
          "long_name" : "東京タワー",
          "short_name" : "東京タワー",
          "types" : [ "premise" ]
        },
        {
          "long_name" : "８",
          "short_name" : "８",
          "types" : [ "sublocality_level_4", "sublocality", "political" ]
        },
        {
          "long_name" : "２",
          "short_name" : "２",
          "types" : [ "sublocality_level_3", "sublocality", "political" ]
        },
        {
          "long_name" : "４丁目",
          "short_name" : "４丁目",
          "types" : [ "sublocality_level_2", "sublocality", "political" ]
        },
        {
          "long_name" : "芝公園",
          "short_name" : "芝公園",
          "types" : [ "sublocality_level_1", "sublocality", "political" ]
        },
        {
          "long_name" : "港区",
          "short_name" : "港区",
          "types" : [ "locality", "political" ]
        },
        {
          "long_name" : "東京都",
          "short_name" : "東京都",
          "types" : [ "administrative_area_level_1", "political" ]
        },
        {
          "long_name" : "日本",
          "short_name" : "JP",
          "types" : [ "country", "political" ]
        },
        {
          "long_name" : "105-0000",
          "short_name" : "105-0000",
          "types" : [ "postal_code" ]
        }
      ],
      "formatted_address" : "日本, 〒105-0000 東京都港区芝公園４丁目２?８ 東京タワー",
      "geometry" : {
        "bounds" : {
          "northeast" : {
            "lat" : 35.6591489,
            "lng" : 139.746113
          },
          "southwest" : {
            "lat" : 35.658052,
            "lng" : 139.7447412
          }
        },
        "location" : {
          "lat" : 35.6585696,
          "lng" : 139.745484
        },
        "location_type" : "ROOFTOP",
        "viewport" : {
          "northeast" : {
            "lat" : 35.6599494302915,
            "lng" : 139.7467760802915
          },
          "southwest" : {
            "lat" : 35.6572514697085,
            "lng" : 139.7440781197085
          }
        }
      },
      "place_id" : "ChIJcx2EkL2LGGARv0gV3HSFqQo",
      "types" : [ "premise" ]
    }
  ],
  "status" : "OK"
}

リンク

https://developers.google.com/maps/

初版:2016年2月14日最終更新:2016年2月14日

https://www.tohoho-web.com/ex/google_maps_api.html