とほほのGoogle Maps API入門

トップ > とほほのGoogle Maps API入門

目次

Google Maps API とは

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

カテゴリサービス説明
AndroidGoogle Maps Android APIAndroid アプリから Google Maps を利用するための Java API。
Google Places API for AndroidAndroid アプリから Google Places を利用するための Java API。
iOSGoogle Maps SDK for iOSiOS アプリから Google Maps を利用するための Objective-C / Swift API。
Google Places API for iOSiOS アプリから Google Places を利用するための Objective-C / Swift API。
WebGoogle 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 ServiceGoogle Maps Directions API2地点間のルートを検索する REST API。
Google Maps Directions Matrix API2地点間のルートの時間と距離を検索する 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 ServiceGoogle Places を利用するための REST API。

標準版とプレミアム版

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

カテゴリサービス標準版
AndroidGoogle Maps Android API無料
Google Places API for Android1,000回/日まで無料。クレジットカード登録後は 150,000回/日まで無料。
AndroidGoogle Maps SDK for iOS無料
Google Places API for iOS1,000回/日まで無料。クレジットカード登録後は 150,000回/日まで無料。
WebGoogle Maps JavaScript API90日間連続して 25,000回/日 を超えるまで無料。超過分は 1,000回毎に $0.50USD 課金。最大 1,000,000回/日。
Google Static Maps API
Google Street View Image API
Google Maps Embed API無料
Web ServiceGoogle Maps Direction API2,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 Service150,000回/日まで無料。クレジットカードによる本人確認が必要。

Googleアカウントを得る

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

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

APIキーを得る

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

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

Google Maps JavaScript API

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

下記のサンプルを許可されたドメインに設置してください。「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>

「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

<iframe> から無料で利用することができます。

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"
}
Copyright (C) 2016 杜甫々
初版:2016年2月14日 最終更新:2016年2月14日
http://www.tohoho-web.com/ex/google_maps_api.html