Google Maps API V3

Google マップのAPIについて解説します。

ライブラリの読み込み

<script type="text/javascript"
  src="https://maps.google.com/maps/api/js?sensor=false"></script>
パラメータ 説明
sensor ユーザー位置情報の使用の有無
language 使用言語 [非推奨]

(既定では、ブラウザの言語設定が使用される)
region 対象地域

(既定では、APIのロード元のドメイン国が使用される)
v 使用するAPIのバージョン

Google Maps API キー

バージョン3以降を使用するならば、API キーを取得する必要はありません。しかしそれより前ならば、事前の取得が必要です。

2016/06/22以降、バージョン3でもAPIキーが必須となりました。指定せずとも当面は動作するようですが保証はなく、「"Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys"」と警告されます。 Google Geo Developers Blog: Building for Scale: Updates to Google Maps APIs Standard Plan (2016/06/22) Google Maps API無償版のポリシー変更、猶予期間が10月12日で終了、地図が突然表示されなくなる可能性も - INTERNET Watch 市川真利 (2016/11/11)

Google MAPS API に登録する - Google Maps API - Google Code Sign Up for the Google Maps API - Google Maps API | Google Developers

APIキーの取得方法

  1. Google APIs Consoleを開きます。
  2. [Services]のページで、「Google Maps API v2」または「Google Maps API v3」のStatusを[ON]にします。
  3. [API Access]のページでSimple API Accessの項目にあるKey for browser appsのAPI keyをメモします。これがAPIキーとなります。
Obtaining an API Key - Getting Started - Google Maps JavaScript API v3 | Google Developers Obtaining an API Key - Google Maps JavaScript API v2 (Deprecated) | Google Developers

Google Maps Platform

2018/06/11以降、Google Maps Platformのキーと請求先アカウント (billing account) が必要となります。このうち請求先アカウントは、Google Cloud Platformの[お支払い]から作成できます。請求先アカウントの作成、変更、閉鎖 | Cloud Billing のドキュメント | Google Cloud

$200/月が無料クレジット (free credit) として提供されており、この範囲内ならば無料で利用できます。この範囲でリクエスト可能な回数はAPIによって異なり、それは料金表 | Google Maps Platform | Google Cloudで確認できます。

利用制限

契約プランによって、1日にリクエスト可能な回数が異なります。価格とプラン | Google Maps API の価格とプラン | Google Developers

使用量が予想外に増加した場合に請求額を抑えるにはどうしたらよいですか？ - よくある質問 | Google Maps API | Google Developers

追加のライブラリ

  • adsense … 地図の内容に即したテキスト広告を表示
  • drawing … 地図上にポリゴン、円、矩形、ポリライン、マーカーを描画
  • geometry … 地表面上のスカラーの幾何学値 (距離、面積など) を計算
  • panoramio … Panoramio写真レイヤを、Maps API アプリケーションに追加
  • places … 定義された領域の中に含まれているプレイス (お店やサービス、名前が付いている地域、ランドマークなど) をアプリケーションで検索
  • visualization … ヒートマップ データと、米国の人口統計情報を視覚的に表現
  • weather … 天気予報と雲の画像を地図に追加
ライブラリ - Google Maps JavaScript API v3 | Google Developers

Mapクラス

Map(
    Node,       // 地図の表示領域となるNode
    MapOptions  // 地図の表示オプション
    );
google.maps.Map class | Google Developers
MapOptions オブジェクト (一部)
分類 プロパティ 型 説明 必須
  center LatLng 地図の場所の初期値 ○
mapTypeId MapTypeId 地図の種類の初期値 ○
zoom number 地図の縮尺の初期値 ○
コントロールの表示オプション mapTypeControlOptions MapTypeControlOptions マップタイプ コントロールの表示オプション  
navigationControlOptions NavigationControlOptions ナビゲーション コントロールの表示オプション  
scaleControlOptions ScaleControlOptions スケール コントロールの表示オプション  
streetView StreetViewPanorama ストリートビューのペグマン コントロールの表示オプション  
コントロールの有効/無効 mapTypeControl boolean マップタイプ コントロール
  
navigationControl boolean ナビゲーション コントロール
  
scaleControl boolean スケール コントロール
  
streetViewControl boolean ストリートビューのペグマン コントロール
  
機能の有効/無効 disableDefaultUI boolean デフォルトUI  
disableDoubleClickZoom boolean ダブルクリックによるズームと中央寄せ  
draggable boolean 地図のドラッグ  
keyboardShortcuts boolean キーボード ショートカット  
noClear boolean 地図のDIVの内容の消去  
google.maps.MapOptions object | Google Developers
Mapクラスのメソッド
メソッド 説明
fitBounds boundsを含むように表示領域を設定する
getBounds 地図の表示領域の範囲を、緯度・経度で返す

地図の表示が完了していない状態では、不正な値を返す。
getCenter 地図の中心の緯度・経度を返す

この緯度・経度は、既定の範囲 (-90～90、-180～180) に収まるように補正されていない。補正されている値を取得するには、代わりにmap.getBounds().getCenter()を使用する。
Mapクラスのプロパティ
プロパティ 説明
controls  
mapTypes  
overlayMapTypes  
Mapクラスのイベント
イベント 説明
bounds_changed  
center_changed  
   

LatLng クラス (緯度・経度)

LatLng(
    lat:number,      // 緯度
    lng:number,      // 経度
    noWrap?:boolean  // trueのとき、範囲外の値を指定されても補正しない
    )
google.maps.LatLng class

緯度・経度の数値は、

  • 緯度 … -90 ～ 90
  • 経度 … -180 ～ 180

の範囲とします。この範囲を外れたときには、noWrapの指定値により異なる結果となります。それはたとえば、次のような違いです。

latlng = new google.maps.LatLng( 91, 181 );
latlng.toString() // "(90, -179)" と返す

latlng = new google.maps.LatLng( 91, 181, true );
latlng.toString() // "(91, 181)" と返す
メソッド
メソッド 型 説明 取得例
lat() number 緯度を度で返す 35.49804684373288
lng() number 経度を度で返す 134.37569025000005
toString() string 緯度、経度を文字列で返す "(35.49804684373288, 134.37569025000005)"

MapTypeId クラス (地図の種類)

定数 説明
ROADMAP 通常の地図
SATELLITE 航空写真
HYBRID 通常の地図 + 航空写真
TERRAIN 地形
google.maps.MapTypeId class | Google Developers

実行例

サンプルコード

<!-- Google Maps APIのライブラリを読み込む -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

<!-- 地図の表示領域を確保する -->
<style type="text/css">
#map-canvas {
  width: 500px;
  height: 200px;
}
</style>

地図は、それを表示するHTMLの要素に収まるように表示されます。よって要素の大きさが明示されていないと表示領域が確保されず、何も表示されないことがあります。

<div id="map-canvas"></div>  <!-- 地図の表示領域 -->

<script type="text/javascript">
  // 表示オプション
  var options =
  {
    center: new google.maps.LatLng( 35.68955, 139.691712 ), // 地図の場所
    mapTypeId: google.maps.MapTypeId.ROADMAP,               // 地図の種類
    zoom: 10                                                // 地図の縮尺
  };

  var canvas = document.getElementById( 'canvas' );

  // Mapクラスを作成し地図を表示する
  new google.maps.Map( canvas, options );
</script>

マーカー (Maker)

地図上に目印を配置します。

var map = new google.maps.Map( node, options );
var location = new google.maps.LatLng( latitude, longitude );

var marker = new google.maps.Marker(
    { map: map, position: location } );

ストリートビュー (Street View)

var options = {
        position: new google.maps.LatLng( 35.68184, 139.764972 )
    };

var canvas = document.getElementById( 'canvas' );
new google.maps.StreetViewPanorama( canvas, options );

イベントの登録と削除

addDomListener(
    instance:Object,
    eventName:string,
    handler:Function,
    capture?:boolean
    )

function EvnetHandler()
{
    var latlng = this.getCenter();
}

var map = new google.maps.Map( Node, MapOptions );

var eventListener = google.maps.event.addDomListener(
    map, 'dragend', EvnetHandler, false );

イベントの種類

google.maps.Map

Events Arguments Description
bounds_changed None This event is fired when the viewport bounds have changed.
center_changed None This event is fired when the map center property changes.
click MouseEvent This event is fired when the user clicks on the map (but not when they click on a marker or infowindow).
dblclick MouseEvent This event is fired when the user double-clicks on the map. Note that the click event will also fire, right before this one.
drag None This event is repeatedly fired while the user drags the map.
dragend None This event is fired when the user stops dragging the map.
dragstart None This event is fired when the user starts dragging the map.
heading_changed None This event is fired when the map heading property changes.
idle None This event is fired when the map becomes idle after panning or zooming.
maptypeid_changed None This event is fired when the mapTypeId property changes.
mousemove MouseEvent This event is fired whenever the user's mouse moves over the map container.
mouseout MouseEvent This event is fired when the user's mouse exits the map container.
mouseover MouseEvent This event is fired when the user's mouse enters the map container.
projection_changed None This event is fired when the projection has changed.
resize None Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .
rightclick MouseEvent This event is fired when the DOM contextmenu event is fired on the map container.
tilesloaded None This event is fired when the visible tiles have finished loading.
tilt_changed None This event is fired when the map tilt property changes.
zoom_changed None This event is fired when the map zoom property changes.

google.maps.StreetViewPanorama

Events Arguments Description
clicktogo_changed None This event is fired when the panorama's clickToGo is enabled or disabled.
closeclick Event This event is fired when the close button is clicked.
links_changed None This event is fired when the panorama's links change. The links change asynchronously following a pano id change.
pano_changed None This event is fired when the panorama's pano id changes. The pano may change as the user navigates through the panorama or the position is manually set. Note that not all position changes trigger a pano_changed.
position_changed None This event is fired when the panorama's position changes. The position changes as the user navigates through the panorama or the position is set manually.
pov_changed None This event is fired when the panorama's point-of-view changes. The point of view changes as the pitch, zoom, or heading changes.
resize None Developers should trigger this event on the panorama when its div changes size: google.maps.event.trigger(panorama, 'resize').
scrollwheel_changed None This event is fired when the panorama's scrollWheel is enabled or disabled.
status_changed None This event is fired after every panorama lookup by id or location, via setPosition() or setPano().
visible_changed None This event is fired when the panorama's visibility changes. The visibility is changed when the Pegman is dragged onto the map, the close button is clicked, or setVisible() is called.
zoom_changed None This event is fired when the panorama's zoom level changes.

参考

非API

http://maps.google.co.jp/maps?q=住所
http://maps.google.co.jp/maps?ll=緯度,経度
住所

参考

Maps JavaScript API

サンプルコード

関連ページ

  • YOLP (Yahoo!の地図API)