SYNCER

SYNCER

Google Maps JavaScript APIの使い方まとめ

4件

公開日: 2015/09/01 / 更新日:

Googleが提供する、Google Maps JavaScript APIを利用して、ウェブページに地図を表示させる方法を説明します。通常の埋め込み型の地図とは違い、コントローラの調整、マーカーや吹き出しを配置したりなど、機能が満載です。

Google Maps JavaScript API V3 Reference
Google Maps JavaScript API V3 Reference
Google Maps JavaScript API V3 ReferenceGoogle Maps JavaScript APIの公式リファレンスです。全てのメソッド、オプションなどについての解説が掲載されています。

準備 (APIキーの取得)

Google Maps JavaScript APIを利用するには、APIキーが必須です。この章では取得方法を説明します。

アカウントの用意

APIキーを取得するためには、Googleのユーザーアカウントが必要です。まだ持っていない人は作成して下さいね。

Googleアカウントの作成
Googleアカウントの作成
Googleのアカウントを作成するには、このページから操作を行なって下さい。

APIの管理画面

アカウントを取得後、開発者たちの管理画面であるGoogle Developers Consoleにアクセスして下さい。

Google Developers Console
Google Developers Console
Googleが提供するAPIを活用する開発者たちの拠点となるページ。ブックマークしておくと今後、便利です。
Console Developers Google
Google Developers Console

アクセスしたら、まずは右上にあるメニューを開き、その中の「プロジェクトを作成」というボタンをクリックして下さい。「プロジェクト」とは、これから作成するアプリケーションをまとめたカテゴリだと思って下さい。

プロジェクトの作成

プロジェクト名を入力する
プロジェクト名を入力する

新しいプロジェクトを作成するためのフォームが出てきます。ここで、好きなプロジェクト名を入力して「作成」のボタンをクリックして下さい。「プロジェクトID」も編集可能ですが、特に変更する必要はありません。ボタンをクリックして問題がなければ、プロジェクトが作成されます。

プロジェクト名をクリックする
プロジェクト名をクリックする

プロジェクトを作成した時と同じ場所のメニュー内に、作成したプロジェクトの名前が加わっています。このプロジェクトが選択状態になっていることを確認して下さい。次回以降、管理画面に移動するには、このプロジェクト名をクリックして下さいね。

APIを有効にする

このプロジェクトにおいて「Google Maps JavaScript API」を利用できるように、有効化する作業を行ないます。

メニューを開く
メニューを開く

まずは、左上にあるアイコンをクリックして、メニューを開いて下さい。

Manager」をクリックする 「API
「API Manager」をクリックする

いくつかの項目がありますが、その中から「API Manager」をクリックして下さい。

「概要」をクリックする
「概要」をクリックする

これで、APIの管理画面に移動することができました。左側にはさらにメニューがありますが、この中の「概要」をクリックして下さい。

APIの権限管理画面
APIの権限管理画面

このような、APIの権限を管理する画面に移動できたはずです。初期画面ではありますが、コンソールの画面が複雑で迷子になった時は、この項で説明した手順でこの画面にアクセスして下さいね。

目的のAPIを探す
目的のAPIを探す

Googleが提供するAPIの一覧が表示されています。まずは目的のAPIを探さなければいけません。左上にあるフォームに「Google Maps JavaScript API」と入力して下さい。

API」をクリックする JavaScript Maps 「Google
「Google Maps JavaScript API」をクリックする

APIが絞り込まれて、いくつか候補が表示されるので、その中から「Google Maps JavaScript API」をクリックして下さい。

「有効にする」をクリックする
「有効にする」をクリックする

設定画面に移動します。ここで「APIを有効にする」というボタンをクリックして下さい。「Google Maps JavaScript APIが有効になりました」というポップアップが出れば、完了です。これで、このプロジェクトで「Google Maps JavaScript API」を使えるようになりました。

アラートを無視する
アラートを無視する

一番最初にこの操作を行うと、図のような、「認証情報を探して下さい」というアラートが表示されるかもしれません。これと同じ操作を次項で行なうので無視してかまいません。こういうイレギュラーなアラートなどから各管理画面に移動すると、次回以降、どうやって同じ画面にアクセスしたらいいか分からなくなるんですよね…。

APIキーの作成

「認証情報」をクリックする
「認証情報」をクリックする

仕上げにAPIキーを取得しましょう。左メニューにある「認証情報」をクリックして下さい。

「認証情報を作成」をクリックする
「認証情報を作成」をクリックする

「認証情報」の設定画面に移動します。初めての場合、図のようにいきなりウィンドウが開くかもしれません。この場合は、「認証情報を作成」をクリックして下さい。

「認証情報を作成」をクリックする
「認証情報を作成」をクリックする

もしウィンドウが表示されない場合でも問題ありません。画面の左上に同じボタンがあるので、これをクリックして下さい。2つ目以降のAPIキーを作成する時は、このボタンを押して作成することになります。

「APIキー」をクリックする
「APIキー」をクリックする

どの種類の認証情報を作成するか、メニューが表示されます。「APIキー」をクリックして下さい。

「ブラウザキー」をクリックする
「ブラウザキー」をクリックする

キーの種類を選択します。ウェブサイトに地図を表示させる場合は「ブラウザキー」をクリックして下さい。

「APIキー」の名前を入力する
「APIキー」の名前を入力する

APIキーの設定フォームが開きます。このAPIキーが何のAPIキーなのか、分かるように名前を入力して下さい。後からいつでも変更できるので、特に悩む必要はありません。

名前の下には「HTTPリファラー」の入力フォームがあります。このキーを使ってAPIを利用できるウェブサイトのURLを入力します。このAPIキーはJavaScriptで利用するため、他人に知られ得る性質のものです。なので、ここでこのAPIキーを利用できるウェブサイトを定義しておくことで、他サイトで不正に利用されるのを防げるというわけですね。例えば、*.syncer.jp/*と設定しておけば、ドメインがsyncer.jp以外のウェブページで、このAPIキーを利用できなくなるということです。

このリファラーの設定は当然、設定を間違えると自サイトでもAPIキーが使えなくなります。APIキーを使ってGoogle Maps APIを利用できることをまず確認したいと思うので、エラーの原因を最小限にするためにも、今の段階では何も設定しないのをオススメします。空白のまま「作成」をクリックして下さい。サービスが本格的に稼働する時に、設定するのを忘れないようにしましょう。

「APIキー」が表示される
「APIキー」が表示される

問題がなければ、このようにAPIキーが作成されて表示されます。このAPIキーを利用して、プログラミングしていきます。お疲れ様でした。

「APIキー」を再設定する
「APIキー」を再設定する

「認証情報」の画面に再アクセスすると作成したAPIキーが表示されているはずです。APIキーを再度確認したり名前やリファラーを変更するには、この画面を利用しましょう。

ライブラリを読み込む

Google Maps JavaScript APIを利用するには、ライブラリとなるJavaScriptを読み込みます。これは、単にGoogleのサーバーに設置してある外部ファイル(CDN)を読み込むだけなので大変、お手軽です。前章で取得したAPIキーを{}の部分にセットして下さい。波括弧({})は要りません。

HTML

<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>

拡張ライブラリ

一部の機能は、librariesというパラメータを利用して拡張ライブラリを読み込まないと利用できません。地図に、より多くの機能を持たせたい場合に調整して下さい。不要なのに拡張ライブラリを読み込めば、当然、通信量が増えて利用するユーザーの負担になります。

説明
drawingユーザーが地図上にマーカーやポリゴンなどを自由に描画できるようになります。
geometryジオコーディングや距離の計算ができるようになります。
placesキーワードや範囲を指定して、スポットを検索できるようになります。
visualizationヒートマップなど、データを可視化できるようになります。

複数の拡張ライブラリを読み込むには、コンマ(,)で区切って下さい。例えば、placesとgeometryの拡張ライブラリを利用するには、次のようにライブラリを読み込みます。

HTML

<script src="//maps.googleapis.com/maps/api/js?key={APIキー}&libraries=places,geometry"></script>

一応ですが、拡張ライブラリは別途読み込むものではありません。基本ライブラリを読み込む時についでに指定するものです。

HTML

<!-- ダメな例 (分けて読み込んでいる) -->
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}&libraries=places,geometry"></script>

<!-- 正しい例 (基本ライブラリと拡張ライブラリは同時に読み込む) -->
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}&libraries=places,geometry"></script>

バージョニング

「ある日、Google Maps APIの仕様が変わってプログラムが動かなくなってしまった」などということがないように、vパラメータを利用して、バージョンを指定することができます。何も指定しなければ、常に、「リリース」の最新のバージョンが読み込まれます。

HTML

<!-- バージョン3.24を常に読み込む -->
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}&v=3.24"></script>

.expを付与することで、実験段階の機能などが盛り込まれた開発バージョンを読み込むことができます。3というのは、2016年現在の、メジャーバージョン(v3)を示しています。

HTML

<!-- 開発段階のバージョンを読み込む -->
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}&v=3.exp"></script>

バージョンの段階

Google Maps JavaScript APIのバージョンには、「エクスペリメンタル」「リリース」「フローズン」の3つの段階が存在します。

説明
エクスペリメンタル開発段階のバージョン。最新の機能が含まれるが、変更されることも多い。動作は安定しないので、製品に利用するのは非推奨。
リリース動作が安定したバージョン。この段階のバージョンは、バグ修正で変更されることはある。
フローズン一切、修正されない古いバージョン。
各バージョンの段階を確認する
各バージョンの段階を確認する

現在のバージョンと、どのバージョンがどの段階なのかを確認するには、公式のリファレンスを参考にして下さい。また、リリースノートのページで各バージョンの詳細を確認できます。

リリースノート
リリースノート
Google Maps JavaScript APIのリリースノート。更新情報など。

ローカライズ

langパラメータに専用の言語コードを指定することで、地図の表記言語を変更してローカライズできます。何も指定しない場合、ユーザーの端末情報から言語が自動的に決定されます。「日本のユーザーに英語の地図を見せたい」などといった場合に利用しましょう。

HTML

<!-- 地図の言語を英語にする -->
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}&lang=en"></script>

言語の一覧

下記は2016年9月現在、利用できる主な言語の一覧です。

コード説明コード説明
ja日本語en英語
zh-TW台湾語en-AUオーストラリア英語
deドイツ語thタイ語
frフランス語ruロシア語
zh-CN中国語ko韓国語
FAQ
FAQ
Google Maps JavaScript APIのFAQ。2016年9月現在、「How can I get the Google Maps APIs to display in a language other than English?」という項目にサポート言語の一覧が掲載されている。

ユーザーログイン

signed_inパラメータにtrueを指定することで、地図上にサインインボタンを設置できます。これは、Googleにログインするためのボタンです。ウェブサイト上の地図を、自身のGoogleのデータに保存するなど、ユーザーにとって有益かもしれません。

HTML

<!-- サインインボタンを実装する -->
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}&signed_in=true"></script>

コールバック

callbackパラメータに関数名を指定することで、ライブラリの読み込みが完了したタイミングで、その関数を実行してくれます。ライブラリの読み込みを非同期にしたい時などに、実行の順番が保証されるので有用です。

HTML

<!-- コールバック関数を指定する -->
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}&callback=runFunc" async></script>

JavaScript

function runFunc() {
	// ライブラリの読み込み完了時に実行したい内容
}

地図 [Mapクラス]

Mapクラスは、全ての基本となる、地図そのものの表示を調整するクラスです。

デモ

プログラミング

まずは気を楽に、シンプルな地図を表示してみましょう。説明がまだよく分からなかったら、とりあえず、サンプルコードをそのまま使って下さいね。

表示するまでにはステップがあります。まず、地図を表示するためのキャンパスとなる要素をHTML上に配置します。map-canvasというid属性値を付けていますが、この名前は自由に変更して下さい。このキャンパスには、必ず、スタイルシートで横幅と高さを指定して下さい。そうしないと、地図が表示されません。JavaScriptは、ライブラリを読み込んだ後に実行して下さい。

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps: 地図の表示</title>
		<!-- スタイルシートの読み込み -->
		<link href="./map.css" rel="stylesheet">
		<!-- Google Mapsライブラリの読み込み -->
		<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	</head>
<body>

<!-- 地図が描画されるキャンパス -->
<div id="map-canvas">ここに地図が表示されます</div>

<!-- JavaScriptの読み込み -->
<script src="./map.js"></script>

</body>
</html>

デモを開く

JavaScript (map.js)

// キャンパスの要素を取得する
var canvas = document.getElementById( 'map-canvas' ) ;

// 中心の位置座標を指定する
var latlng = new google.maps.LatLng( 35.792621, 139.806513 );

// 地図のオプションを設定する
var mapOptions = {
	zoom: 15 ,	// ズーム値
	center: latlng ,	// 中心座標 [latlng]
};

// [canvas]に、[mapOptions]の内容の、地図のインスタンス([map])を作成する
var map = new google.maps.Map( canvas, mapOptions ) ;

CSS (map.css)

/* 地図キャンパス */
#map-canvas {
	width: 800px ;
	height: 600px ;
}

コンストラクタ

地図を表示するには、Mapクラスを利用します。第1引数には、地図キャンパスとなるエレメント(div要素など)、第2引数には、オプションとなるオブジェクトを指定します。インスタンスを作成した時点で、地図は描画されるので、左辺(var map =の部分)は必ずしも必要ありません。インスタンスを代入した任意名の変数(map)は後ほど、地図を操作する際に利用できます。逆に、一度表示して、その後は一切地図を操作しない場合は不要だということです。

JavaScript

var map = new google.maps.Map( canvas , MapOptions )
番号引数説明
第1引数canvas地図のキャンパスにする要素。
第2引数MapOptions地図のオプションを表すオブジェクト。

canvas

// 地図のキャンパスとなるdiv要素を取得
// <div id="map-canvas"></div>
var canvas = document.getElementById( "map-canvas" ) ;

MapOptions

// 地図のオプションを設定する (第2引数に指定)
var mapOptions = {
	zoom: 15 ,				//ズーム値
	center: new google.maps.LatLng( 35, 139 ) ,		//中心の位置座標
//	disableDefaultUI: true ,		//デフォルトUIをなくす
//	draggable: false ,		//ドラッグできなくする
//	...
} ;

オプション

オプション名説明
backgroundColorキャンパスの背景色を指定する。
center初期の位置座標を指定する。
clickableIconsPOIアイコンのクリックを調整する。
disableDefaultUIデフォルトのコントローラの表示を調整する。
disableDoubleClickZoomダブルクリックによるズーム値変更を調整する。
draggableドラッグ操作での地図の移動を調整する。
draggableCursorドラッグ可能な場所にホバーした時のマウスカーソルの形状を指定する。
draggingCursorドラッグ操作中のマウスカーソルの形状を指定する。
fullscreenControlフルスクリーン・コントローラの表示を調整する。
fullscreenControlOptionsフルスクリーン・コントローラのスタイルを調整する。
gestureHandlingタッチ操作の挙動を調整する。
heading航空写真にした時の東西南北の角度を指定する。
keyboardShortcutsキーボード操作を調整する。
mapTypeControlマップタイプ・コントローラの表示を調整する。
mapTypeControlOptionsマップタイプ・コントローラのスタイルを調整する。
mapTypeId初期の地図の種類を指定する。
maxZoomズームで、拡大の最大値を指定する。
minZoomズームで、縮小の最小値を指定する。
noClear地図キャンパスに指定したHTML要素の、子孫要素を削除するか否かを指定する。
panControlバージョン3.22で廃止されました。パン・コントローラの表示を調整する。
panControlOptionsバージョン3.22で廃止されました。パン・コントローラのスタイルを調整する。
rotateControl回転コントローラの表示を調整する。
rotateControlOptions回転コントローラのスタイルを調整する。
scaleControlスケール・コントローラの表示を調整する。
scaleControlOptionsスケール・コントローラのスタイルを調整する。
scrollwheelホイール操作によるズーム値の変更を調整する。
signInControlサインイン・ボタンの表示を調整する。
streetViewControlストリートビュー・コントローラ(ペグマン人形)の表示を調整する。
streetViewControlOptionsストリートビュー・コントローラ(ペグマン人形)の表示をスタイルする。
tilt航空写真にした時の傾きの角度を指定する。
zoom初期のズーム値を指定する。
zoomControlズーム・コントローラの表示を調整する。
zoomControlOptionsズーム・コントローラのスタイルを調整する。

メソッド

メソッド名説明
fitBounds()指定した境界がちょうどよく見える位置座標とズーム値に変更する。
getBounds()地図の現在のビューポートの境界を取得する。
getCenter()地図の現在の中心の位置座標を取得する。
getClickableIcons()POIアイコンをクリックできるか否かを確認する。
getDiv()キャンパスとして利用しているHTML要素を取得する。
getHeading()東西南北の角度を取得する。
getMapTypeId()現在の地図の種類を取得する。
getStreetView()ストリートビューを取得する。
getTilt()傾きの角度を取得する。
getZoom()ズーム値を取得する。
panBy()地図の位置座標を相対的に移動する。
panTo()地図の位置座標を絶対的に移動する。
panToBounds()ビューポートを指定した境界に移動する。
setCenter()位置座標をセットする。
setClickableIcons()POIアイコンのクリック設定を変更する。
setHeading()東西南北の角度をセットする。
setMapTypeId()地図の種類をセットする。
setOptions()地図のオプションをセットする。
setStreetView()ストリートビューをセットする。
setTilt()傾きの角度をセットする。
setZoom()ズーム値をセットする。

イベント

イベント名説明
bounds_changedビューポートに変化があった時に発火するイベント。
center_changed地図の位置座標に変化があった時に発火するイベント。
click地図をクリックした時に発火するイベント。
dblclick地図をダブルクリックした時に発火するイベント。
drag地図をドラッグ操作した時に発火するイベント。
dragend地図のドラッグ操作を終了した時に発火するイベント。
dragstart地図のドラッグ操作を開始した時に発火するイベント。
heading_changed地図の東西南北の角度を変更した時に発火するイベント。
idle地図がアイドル状態になった時に発火するイベント。
maptypeid_changed地図の種類を変更した時に発火するイベント。
mousemove地図上でマウスカーソルを動かした時に発火するイベント。
mouseout地図の外にマウスカーソルを出した時に発火するイベント。
mouseover地図の上にマウスカーソルを乗せた時に発火するイベント。
projection_changedプロジェクションが変化した時に発火するイベント。
resizeトリガーで、リサイズによるリフレッシュを行なった時に発火するイベント。
rightclick地図を右クリックした時に発火するイベント。
tilesloaded地図のタイルの読み込みが完了した時に発火するイベント。
tilt_changed地図の傾きの角度を変更した時に発火するイベント。
zoom_changedズーム値を変更した時に発火するイベント。

マーカー [Markerクラス]

Markerクラスは、地図にマーカーを設置するクラスです。

デモ

プログラミング

マーカーを地図に設置するには、Mapクラスを使って地図のインスタンスを作成した時と同様で、Markerクラスを利用して、マーカーのインスタンスを作成します。Markerクラスの引数は1つで、マーカー用のオプションオブジェクトを指定します。

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps: 地図の表示</title>
		<!-- スタイルシートの読み込み -->
		<link href="./map.css" rel="stylesheet">
		<!-- Google Mapsライブラリの読み込み -->
		<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	</head>
<body>

<!-- 地図が描画されるキャンパス -->
<div id="map-canvas">ここに地図が表示されます</div>

<!-- JavaScriptの読み込み -->
<script src="./map.js"></script>

</body>
</html>

デモを開く

JavaScript (map.js)

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
	zoom: 15 ,	// ズーム値
	center: new google.maps.LatLng( 35.792621, 139.806513 ) ,	// 中心の位置座標
} ) ;

// マーカーのインスタンスを作成する
var marker = new google.maps.Marker( {
	map: map ,	// 地図
	position: new google.maps.LatLng( 35.792621, 139.806513 ) ,	// 位置座標
} ) ;

CSS (map.css)

/* 地図キャンパス */
#map-canvas {
	width: 800px ;
	height: 600px ;
}

配列で管理する

作成したマーカーのインスタンスは、個々の変数に代入するよりも、配列に代入する方が、後ほど管理しやすいのでお勧めです。例えば、「地図上にあるマーカー全てを削除したい」「地図上にあるマーカー全ての位置座標を知りたい」というように、マーカー全てに対して処理をしたい場合などに、個々の独立した変数よりも、配列の方がプログラミングしやすいからです。マーカーに限らず、複数存在する可能性があるインスタンスを取り扱うには、配列で管理するのが基本です。

JavaScript

//個々の独立した変数で管理すると、全てのマーカーに処理をしたい時に大変…
marker1 = new google.maps.Marker( {...} ) ;		// 1つ目のマーカー
marker2 = new google.maps.Marker( {...} ) ;		// 2つ目のマーカー
marker3 = new google.maps.Marker( {...} ) ;		// 3つ目のマーカー

// 配列にすれば、ループ処理などで全てのマーカーをまとめて処理できて簡単!
var markers = [] ;
markers[0] = new google.maps.Marker( {...} );	// 1つ目のマーカー
markers[1] = new google.maps.Marker( {...} );	// 2つ目のマーカー
markers[2] = new google.maps.Marker( {...} );	// 3つ目のマーカー

コンストラクタ

マーカーを設置するにはMarkerクラスを利用します。引数は、オプションとなるオブジェクトのみです。

JavaScript

var marker = new google.maps.Marker( MarkerOptions )
番号引数説明
第1引数MarkerOptionsマーカーのオプションを表すオブジェクト。

MapOptions

// マーカーのオプションを設定する (引数に指定)
var MarkerOptions = {
	map: map ,	// 設置する地図
	position: new google.maps.LatLng( 35, 139 ) ,	// 位置座標
} ;

オプション

オプション名説明
anchorPoint情報ウィンドウの位置を指定する。
animationマーカーにアニメーションを適用する。
attributionマーカーに紐付けた場所に、補足情報を追加する。
clickableマーカーをクリックできるか否か指定する。
crossOnDragマーカーをドラッグ操作中の十字マークの表示を調整する。
cursorマーカーにホバーした時の、マウスカーソルの形状を調整する。
draggableマーカーをドラッグ操作できるか否かを調整する。
iconマーカーの画像を調整する。
labelマーカーのラベルを調整する。
mapマーカーを設置する地図を調整する。
opacityマーカーの不透明度を調整する。
optimizedマーカー画像の最適化を行なうか否かを調整する。最適化を行なうとGIFアニメーションが無効になる。
placeマーカーに紐付ける場所の情報を調整する。
positionマーカーを設置する位置座標を調整する。
shapeポインターに反応する領域を調整する。
titleマーカーのツールチップを調整する。
visibleマーカーの表示状態を調整する。
zIndex重なり順の優先度を調整する。

メソッド

メソッド名説明
getAnimation()マーカーに適用されているアニメーションを取得する。
getAttribution()マーカーに紐付けた場所に設定してある、補足情報を取得する。
getClickable()マーカーがクリック可能か否かを確認する。
getCursor()マーカーにホバーした時の、マウスカーソルの形状を取得する。
getDraggable()マーカーがドラッグ操作で移動できるか否かを確認する。
getIcon()マーカーの画像を取得する。
getLabel()マーカーのラベルを取得する。
getMap()マーカーが設置されている地図を取得する。
getOpacity()マーカーの不透明度を取得する。
getPlace()マーカーに紐付けられた場所の情報を取得する。
getPosition()マーカーの位置座標を取得する。
getShape()マーカーの、クリックやドラッグ操作に反応する有効な領域を取得する。
getTitle()マーカーのツールチップの内容を取得する。
getVisible()マーカーの表示状態を取得する。
getZIndex()マーカーのz-orderを取得する。
setAnimation()マーカーにアニメーションを適用する。
setAttribution()マーカーに紐付けられた場所に、補足情報を追加する。
setClickable()マーカーのクリックの有効、無効をセットする。
setCursor()マーカーにホバーした時の、マウスカーソルの形状をセットする。
setDraggable()マーカーのドラッグ操作の有効、無効をセットする。
setIcon()マーカーの画像をセットする。
setLabel()マーカーのラベルをセットする。
setMap()マーカーを地図にセットする。または地図から取り除く。
setOpacity()マーカーの不透明度をセットする。
setOptions()マーカーの各種設定をまとめて変更する。
setPlace()マーカーに場所を紐付ける。
setPosition()マーカーの位置座標をセットする。
setShape()マーカーの、クリックやドラッグ操作に反応する有効な領域をセットする。
setTitle()マーカーのツールチップの内容をセットする。
setVisible()マーカーの表示状態をセットする。
setZIndex()マーカーのz-orderをセットする。

イベント

イベント名説明
animation_changedマーカーのアニメーションが変化した時に発火するイベント。
clickマーカーをクリックした時に発火するイベント。
clickable_changedマーカーのクリックの有効、無効を設定した時に発火するイベント。
cursor_changedマーカーにホバーした時の、マウスカーソルの形状の設定を変更した時に発火するイベント。
dblclickマーカーをダブルクリックした時に発火するイベント。
dragマーカーをドラッグ操作で移動している時に発火するイベント。
dragendマーカーのドラッグ操作を完了した時に発火するイベント。
draggable_changedマーカーの、ドラッグ操作の有効、無効を設定した時に発火するイベント。
dragstartマーカーのドラッグ操作を開始した時に発火するイベント。
icon_changedマーカーの画像をセットした時に発火するイベント。
mousedownマーカー上でマウスボタンを押した時に発火するイベント。
mouseoutマーカー上からマウスのポインターを出した時に発火するイベント。
mouseoverマーカー上にマウスのポインターを乗せた時に発火するイベント。
mouseupマーカー上でマウスのボタンを離した時に発火するイベント。
position_changedマーカーの位置座標を変更した時に発火するイベント。
rightclickマーカーを右クリックした時に発火するイベント。
shape_changedマーカーの、クリックやドラッグ操作に反応する有効な領域を設定した時に発火するイベント。
title_changedマーカーのツールチップの内容を変更した時に発火するイベント。
visible_changedマーカーの表示状態を設定した時に発火するイベント。
zindex_changedマーカーのz-orderを設定した時に発火するイベント。

情報ウィンドウ [InfoWindowクラス]

InfoWindowクラスは、地図に情報ウィンドウを設置するクラスです。

デモ

プログラミング

情報ウィンドウを設置するには2つのステップがあります。まずは、InfoWindowクラスを使ってインスタンスを作成します。引数は、オプションとなるオブジェクトのみです。そして作成後にopen()メソッドを実行して、地図、またはマーカー上に情報ウィンドウを表示します。

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps: 地図の表示</title>
		<!-- スタイルシートの読み込み -->
		<link href="./map.css" rel="stylesheet">
		<!-- Google Mapsライブラリの読み込み -->
		<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	</head>
<body>

<!-- 地図が描画されるキャンパス -->
<div id="map-canvas">ここに地図が表示されます</div>

<!-- JavaScriptの読み込み -->
<script src="./map.js"></script>

</body>
</html>

デモを開く

JavaScript (map.js)

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
	zoom: 15 ,	// ズーム値
	center: new google.maps.LatLng( 35.792621, 139.806513 ) ,	// 中心の位置座標
} ) ;

// 情報ウィンドウのインスタンスを作成する
var infoWindow = new google.maps.InfoWindow( {
	content: "SYNCER" ,	// 内容
	position: map.getCenter() ,	// 位置座標
} ) ;

infoWindow.open( map ) ;

CSS (map.css)

/* 地図キャンパス */
#map-canvas {
	width: 800px ;
	height: 600px ;
}

コンストラクタ

情報ウィンドウを設置するにはInfoWindowクラスを利用します。引数は、オプションとなるオブジェクトのみです。

JavaScript

var infoWindow = new google.maps.InfoWindow( InfoWindowOptions )
番号引数説明
第1引数InfoWindowOptions情報ウィンドウのオプションを表すオブジェクト。

InfoWindowOptions

// 情報ウィンドウのオプションを設定する (引数に指定)
var InfoWindowOptions = {
	map: map ,	// 設置する地図
	content: "SYNCER" ,	// 表示する内容
} ;

オプション

オプション名説明
content情報ウィンドウに表示する内容を調整する。
disableAutoPan情報ウィンドウを開く時の位置座標の自動修正を拒否する。
maxWidth情報ウィンドウの最大横幅を調整する。
pixelOffset情報ウィンドウの位置をズラす。
position情報ウィンドウの位置座標を調整する。
zIndex情報ウィンドウのz-orderを調整する。

メソッド

メソッド名説明
close()情報ウィンドウを閉じる。
getContent()情報ウィンドウの内容を取得する。
getPosition()情報ウィンドウの位置座標を取得する。
getZIndex()情報ウィンドウのz-orderを取得する。
open()情報ウィンドウを開く。
setContent()情報ウィンドウの内容をセットする。
setOptions()情報ウィンドウの各種設定を変更する。
setPosition()情報ウィンドウの位置座標をセットする。
setZIndex()情報ウィンドウのz-orderをセットする。

イベント

イベント名説明
closeclick情報ウィンドウを、バツボタンを押して閉じた時に発火するイベント。
content_changed情報ウィンドウの内容をセットした時に発火するイベント。
domready情報ウィンドウを開き、DOMの準備ができた時に発火するイベント。
position_changed情報ウィンドウの位置座標が変化した時に発火するイベント。
zindex_changed情報ウィンドウのz-orderが変化した時に発火するイベント。

ポリライン [Polylineクラス]

Polylineクラスは、地図に線を設置するクラスです。

デモ

プログラミング

ポリラインのインスタンスはオプションとなるオブジェクトを引数に渡して作ります。pathプロパティには、少なくても始点、終点の2点を含めた任意の数の位置座標を指定して下さい。

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps: 地図の表示</title>
		<!-- スタイルシートの読み込み -->
		<link href="./map.css" rel="stylesheet">
		<!-- Google Mapsライブラリの読み込み -->
		<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	</head>
<body>

<!-- 地図が描画されるキャンパス -->
<div id="map-canvas">ここに地図が表示されます</div>

<!-- JavaScriptの読み込み -->
<script src="./map.js"></script>

</body>
</html>

デモを開く

JavaScript (map.js)

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
	zoom: 15 ,	// ズーム値
	center: new google.maps.LatLng( 35.792621, 139.806513 ) ,	// 中心の位置座標
} ) ;

// ポリラインのインスタンスを作成する
var polyline = new google.maps.Polyline( {
	map: map ,
	path: [
		new google.maps.LatLng( -9.737363797981372, -54.62325150000004 ) ,
		new google.maps.LatLng( 21.671578686773664, 79.32206099999996 ) ,
	] ,
} ) ;

// 地図のビューポートを修正する
var latLngBounds = new google.maps.LatLngBounds() ;

polyline.getPath().forEach( function ( latLng ) {
	latLngBounds.extend( latLng ) ;
} ) ;

map.fitBounds( latLngBounds ) ;

CSS (map.css)

/* 地図キャンパス */
#map-canvas {
	width: 800px ;
	height: 600px ;
}

コンストラクタ

ポリラインを設置するにはPolylineOptionsクラスを利用します。引数は、オプションとなるオブジェクトのみです。

JavaScript

var polyline = new google.maps.Polyline( PolylineOptions )
番号引数説明
第1引数PolylineOptionsポリラインのオプションを表すオブジェクト。

PolylineOptions

// ポリラインのオプションを設定する (引数に指定)
var PolylineOptions = {
	map: map ,	// 設置する地図
	path: [	// 線が結ぶ位置座標 (任意の数)
		new google.maps.LatLng( -9.737363797981372, -54.62325150000004 ) ,
		new google.maps.LatLng( 21.671578686773664, 79.32206099999996 ) ,
	] ,
} ;

オプション

オプション名説明
clickableポリラインをクリックできるか否かを調整する。
draggableポリラインをドラッグ操作できるか否かを調整する。
editableポリラインを編集できるか否かを調整する。
geodesicポリラインを測地線に対応させるか否かを調整する。
iconsポリラインに乗せるアイコンを調整する。
mapポリラインを設置する地図を調整する。
pathポリラインのパスを調整する。
strokeColorポリラインの線の色を調整する。
strokeOpacityポリラインの線の不透明度を調整する。
strokeWeightポリラインの線の太さを調整する。
visibleポリラインの表示状態を調整する。
zIndexポリラインのz-orderを調整する。

メソッド

メソッド名説明
getDraggable()ポリラインがドラッグ操作できるか否かを取得する。
getEditable()ポリラインが編集できるか否かを取得する。
getMap()ポリラインが設置されている地図を取得する。
getPath()ポリラインのパスを取得する。
getVisible()ポリラインの表示状態を取得する。
setDraggable()ポリラインのドラッグ操作の有効、無効をセットする。
setEditable()ポリラインの編集の有効、無効をセットする。
setMap()ポリラインを地図に設置する、または地図から取り除く。
setOptions()ポリラインの各種設定をまとめて調整する。
setPath()ポリラインのパスをセットする。
setVisible()ポリラインの表示状態をセットする。

イベント

イベント名説明
clickポリラインをクリックした時に発火するイベント。
dblclickポリラインをダブルクリックした時に発火するイベント。
dragポリラインをドラッグ操作している時に発火するイベント。
dragendポリラインのドラッグ操作を完了した時に発火するイベント。
dragstartポリラインのドラッグ操作を開始した時に発火するイベント。
mousedownポリライン上でマウスボタンを押した時に発火するイベント。
mousemoveポリライン上でマウスポインタを動かしている時に発火するイベント。
mouseoutポリライン上からマウスポインタを出した時に発火するイベント。
mouseoverポリライン上にマウスポインタを乗せた時に発火するイベント。
mouseupポリライン上でマウスボタンを離した時に発火するイベント。
rightclickポリライン上で右クリックした時に発火するイベント。

ポリゴン [Polygonクラス]

Polygonクラスは、地図に多角形を設置するクラスです。

デモ

プログラミング

ポリゴンのインスタンスを作るには、オプションとなるオブジェクトのpathsプロパティで、少なくても3点を含めた任意の数の位置座標を指定して下さい。それらの位置座標が多角形の角を構成します。

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps: 地図の表示</title>
		<!-- スタイルシートの読み込み -->
		<link href="./map.css" rel="stylesheet">
		<!-- Google Mapsライブラリの読み込み -->
		<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	</head>
<body>

<!-- 地図が描画されるキャンパス -->
<div id="map-canvas">ここに地図が表示されます</div>

<!-- JavaScriptの読み込み -->
<script src="./map.js"></script>

</body>
</html>

デモを開く

JavaScript (map.js)

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
	zoom: 15 ,	// ズーム値
	center: new google.maps.LatLng( 35.792621, 139.806513 ) ,	// 中心の位置座標
} ) ;

// ポリゴンのインスタンスを作成する
var polygon = new google.maps.Polygon( {
	map: map ,
	paths: [
		new google.maps.LatLng( 32.3738255865663, 131.13505137238764 ) ,
		new google.maps.LatLng( 35.74061544252547, 139.92411387238764 ) ,
		new google.maps.LatLng( 43.04752474416507, 141.90165293488764 ) ,
		new google.maps.LatLng( 35.4547520334738, 133.37626230988764 ) ,
	] ,
} ) ;

// 地図のビューポートを修正する
var latLngBounds = new google.maps.LatLngBounds() ;

polygon.getPaths().forEach( function ( latLngs ) {
	latLngs.forEach( function ( latLng ) {
		latLngBounds.extend( latLng ) ;
	} ) ;
} ) ;

map.fitBounds( latLngBounds ) ;

CSS (map.css)

/* 地図キャンパス */
#map-canvas {
	width: 800px ;
	height: 600px ;
}

コンストラクタ

ポリゴンを設置するにはPolygonOptionsクラスを利用します。

JavaScript

var polygon = new google.maps.Polygon( PolygonOptions )
番号引数説明
第1引数PolygonOptionsポリゴンのオプションを表すオブジェクト。

PolygonOptions

// ポリゴンのオプションを設定する (引数に指定)
var PolygonOptions = {
	map: map ,	// 設置する地図
	paths: [	// 多角形の角となる位置座標 (任意の数)
		new google.maps.LatLng( 32.3738255865663, 131.13505137238764 ) ,
		new google.maps.LatLng( 35.74061544252547, 139.92411387238764 ) ,
		new google.maps.LatLng( 43.04752474416507, 141.90165293488764 ) ,
		new google.maps.LatLng( 35.4547520334738, 133.37626230988764 ) ,
	] ,
} ;

オプション

オプション名説明
clickableポリゴンをクリックできるか否かを調整する。
draggableポリゴンをドラッグ操作できるか否かを調整する。
editableポリゴンを編集できるか否かを調整する。
fillColorポリゴンの塗りつぶしの色を調整する。
fillOpacityポリゴンの塗りつぶしの色を調整する。
geodesicポリゴンを測地線に対応させるか否かを調整する。
mapポリゴンを設置する地図を指定する。
pathsポリゴンの各角となる位置座標を指定する。
strokeColorポリゴンの線の色を調整する。
strokeOpacityポリゴンの線の不透明度を調整する。
strokePositionポリゴンの線の位置を調整する。
strokeWeightポリゴンの線の太さを調整する。
visibleポリゴンの表示状態を調整する。
zIndexポリゴンのz-orderを調整する。

メソッド

メソッド名説明
getDraggable()ポリゴンがドラッグ操作できるか否かを取得する。
getEditable()ポリゴンが編集できるか否かを取得する。
getMap()ポリゴンが設置されている地図を取得する。
getPath()ポリゴンの一次元配列のパスを取得する。
getPaths()ポリゴンの二次元配列のパスを取得する。
getVisible()ポリゴンの表示状態を取得する。
setDraggable()ポリゴンのドラッグ操作の有効、無効をセットする。
setEditable()ポリゴンの編集の有効、無効をセットする。
setMap()ポリゴンを地図に設置する。または地図から取り除く。
setOptions()ポリゴンの各種設定をセットする。
setPath()ポリゴンに一次元配列のパスをセットする。
setPaths()ポリゴンに二次元配列のパスをセットする。
setVisible()ポリゴンの表示状態をセットする。

イベント

イベント名説明
clickポリゴン上でクリックした時に発火するイベント。
dblclickポリゴン上でダブルクリックした時に発火するイベント。
dragポリゴンをドラッグ操作で動かしている時に発火するイベント。
dragendポリゴンのドラッグ操作を完了した時に発火するイベント。
dragstartポリゴンのドラッグ操作を開始した時に発火するイベント。
mousedownポリゴン上でマウスボタンを押した時に発火するイベント。
mousemoveポリゴン上でマウスポインタを動かしている時に発火するイベント。
mouseoutポリゴン上からマウスポインタを出した時に発火するイベント。
mouseoverポリゴン上にマウスポインタを乗せた時に発火するイベント。
mouseupポリゴン上でマウスボタンを離した時に発火するイベント。
rightclickポリゴン上で右クリックした時に発火するイベント。

レクタングル [Rectangleクラス]

Rectangleクラスは、地図に長方形を設置するクラスです。多角形は角となる位置座標を任意の数だけ指定して作成するのに対して、レクタングルはBounding box(境界ボックス)を指定して作成するので必ず四角形になります。

デモ

プログラミング

レクタングルのインスタンスを作るには、オプションとなるオブジェクトのboundsプロパティでBounding boxを指定して下さい。Bounding boxは、LatLngBoundsクラスのインスタンス、または、LatLngBoundsLiteralオブジェクトで指定します。

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps: 地図の表示</title>
		<!-- スタイルシートの読み込み -->
		<link href="./map.css" rel="stylesheet">
		<!-- Google Mapsライブラリの読み込み -->
		<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	</head>
<body>

<!-- 地図が描画されるキャンパス -->
<div id="map-canvas">ここに地図が表示されます</div>

<!-- JavaScriptの読み込み -->
<script src="./map.js"></script>

</body>
</html>

デモを開く

JavaScript (map.js)

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
	zoom: 15 ,	// ズーム値
	center: new google.maps.LatLng( 35.792621, 139.806513 ) ,	// 中心の位置座標
} ) ;

// レクタングルのインスタンスを作成する
var rectangle = new google.maps.Rectangle( {
	bounds: new google.maps.LatLngBounds(	// 境界
		new google.maps.LatLng( 32.686876527300385, 132.2624296523437 ) ,
		new google.maps.LatLng( 34.43532937910868, 134.7123808242187 )
	)  ,
	map: map ,	// 地図
} ) ;

// 地図のビューポートを修正する
map.fitBounds( rectangle.getBounds() ) ;

CSS (map.css)

/* 地図キャンパス */
#map-canvas {
	width: 800px ;
	height: 600px ;
}

コンストラクタ

レクタングルを設置するにはRectangleOptionsクラスを利用します。

JavaScript

var rectangle = new google.maps.Rectangle( RectangleOptions )
番号引数説明
第1引数RectangleOptions多角形のオプションを表すオブジェクト。

RectangleOptions

// レクタングルのオプションを設定する (引数に指定)
var RectangleOptions = {
	map: map ,	// 設置する地図
	bounds: new google.maps.LatLngBounds(	// 境界(Bounding box)
		new google.maps.LatLng( 32.686876527300385, 132.2624296523437 ) ,
		new google.maps.LatLng( 34.43532937910868, 134.7123808242187 )
	)  ,
} ;

オプション

オプション名説明
boundsレクタングルの境界(Bounding box)を調整する。
clickableレクタングルのクリックの有効、無効を調整する。
draggableレクタングルのドラッグ操作の有効、無効を調整する。
editableレクタングルの編集の有効、無効を調整する。
fillColorレクタングルの塗りつぶしの色を調整する。
fillOpacityレクタングルの塗りつぶしの不透明度を調整する。
mapレクタングルを設置する地図を指定する。
strokeColorレクタングルの線の色を調整する。
strokeOpacityレクタングルの線の不透明度を調整する。
strokePositionレクタングルの線の位置を調整する。
strokeWeightレクタングルの線の太さを調整する。
visibleレクタングルの表示状態を調整する。
zIndexレクタングルのz-orderを調整する。

メソッド

メソッド名説明
getBounds()レクタングルにセットされている境界(Bounding box)を取得する。
getDraggable()レクタングルのドラッグ操作の有効、無効を取得する。
getEditable()レクタングルの編集の有効、無効を取得する。
getMap()レクタングルが設置されている地図を取得する。
getVisible()レクタングルの表示状態を取得する。
setBounds()レクタングルの境界(Bounding box)をセットする。
setDraggable()レクタングルのドラッグ操作の有効、無効をセットする。
setEditable()レクタングルの編集の有効、無効をセットする。
setMap()レクタングルを地図に設置する。または地図から取り除く。
setOptions()レクタングルの各種設定をセットする。
setVisible()レクタングルの表示状態をセットする。

イベント

イベント名説明
bounds_changedレクタングルの境界(Bounding box)に変化があった時に発火するイベント。
clickレクタングルをクリックした時に発火するイベント。
dblclickレクタングルをダブルクリックした時に発火するイベント。
dragレクタングルをドラッグ操作して動かしている時に発火するイベント。
dragendレクタングルのドラッグ操作を完了した時に発火するイベント。
dragstartレクタングルのドラッグ操作を開始した時に発火するイベント。
mousedownレクタングル上でマウスボタンを押した時に発火するイベント。
mousemoveレクタングル上でマウスポインタを動かしている時に発火するイベント。
mouseoutレクタングル上からマウスポインタを出した時に発火するイベント。
mouseoverレクタングル上にマウスポインタを乗せた時に発火するイベント。
mouseupレクタングル上でマウスボタンを離した時に発火するイベント。
rightclickレクタングルを右クリックした時に発火するイベント。

円 [Circleクラス]

Circleクラスは、地図に円を設置するクラスです。範囲の表示などにも利用できます。

デモ

プログラミング

円のインスタンスを作るには、Circleクラスを利用します。centerに中心の位置座標、radiusに半径をメートル単位で指定します。

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps: 地図の表示</title>
		<!-- スタイルシートの読み込み -->
		<link href="./map.css" rel="stylesheet">
		<!-- Google Mapsライブラリの読み込み -->
		<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	</head>
<body>

<!-- 地図が描画されるキャンパス -->
<div id="map-canvas">ここに地図が表示されます</div>

<!-- JavaScriptの読み込み -->
<script src="./map.js"></script>

</body>
</html>

デモを開く

JavaScript (map.js)

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
	zoom: 15 ,	// ズーム値
	center: new google.maps.LatLng( 35.792621, 139.806513 ) ,	// 中心の位置座標
} ) ;

// 円のインスタンスを作成する
var circle = new google.maps.Circle( {
	center: new google.maps.LatLng( 33.839947, 132.75110700000008 ) ,	// 中心の位置座標
	map: map ,	// 設置する地図
	radius: 10000 ,	// 半径
} ) ;

// 地図のビューポートを修正する
map.fitBounds( circle.getBounds() ) ;

CSS (map.css)

/* 地図キャンパス */
#map-canvas {
	width: 800px ;
	height: 600px ;
}

コンストラクタ

円を設置するにはCircleOptionsクラスを利用します。

JavaScript

var circle = new google.maps.Circle( CircleOptions )
番号引数説明
第1引数CircleOptions円のオプションを表すオブジェクト。

CircleOptions

// 円のオプションを設定する (引数に指定)
var CircleOptions = {
	map: map ,	// 設置する地図
	center: new google.maps.LatLng( 33.839947, 132.75110700000008 ) ,	// 中心の位置座標
	radius: 10000 ,	// 半径
} ;

オプション

オプション名説明
center円の中心の位置座標を調整する。
clickable円のクリックの有効、無効を調整する。
draggable円のドラッグ操作の有効、無効を調整する。
editable円の編集の有効、無効を調整する。
fillColor円の塗りつぶしの色を調整する。
fillOpacity円の塗りつぶしの不透明度を調整する。
map円を設置する地図を指定する。
radius円の半径を調整する。
strokeColor円の線の色を調整する。
strokeOpacity円の線の不透明度を調整する。
strokePosition円の線の位置を調整する。
strokeWeight円の線の太さを調整する。
visible円の表示状態を調整する。
zIndex円のz-orderを調整する。

メソッド

メソッド名説明
getBounds()円を取り囲める最小の境界(Bounding box)を取得する。
getCenter()円の中心の位置座標を取得する。
getDraggable()円のドラッグ操作の有効、無効を取得する。
getEditable()円の編集の有効、無効を取得する。
getMap()円が設置されている地図を取得する。
getRadius()円の半径を取得する。
getVisible()円の表示状態を取得する。
setCenter()円の中心の位置座標をセットする。
setDraggable()円のドラッグ操作の有効、無効をセットする。
setEditable()円の編集の有効、無効をセットする。
setMap()円を地図に設置する。または地図から取り除く。
setOptions()円の各種設定をセットする。
setRadius()円の半径をセットする。
setVisible()円の表示状態をセットする。

イベント

イベント名説明
center_changed円の中心の位置座標が変化した時に発火するイベント。
click円をクリックした時に発火するイベント。
dblclick円をダブルクリックした時に発火するイベント。
drag円をドラッグ操作で動かしている時に発火するイベント。
dragend円のドラッグ操作を完了した時に発火するイベント。
dragstart円のドラッグ操作を開始した時に発火するイベント。
mousedown円上でマウスボタンを押した時に発火するイベント。
mousemove円上でマウスポインタを動かしている時に発火するイベント。
mouseout円上からマウスポインタを出した時に発火するイベント。
mouseover円上にマウスポインタを乗せた時に発火するイベント。
mouseup円上でマウスボタンを離した時に発火するイベント。
radius_changed円の半径が変化した時に発火するイベント。
rightclick円を右クリックした時に発火するイベント。

オーバーレイ [GroundOverlayクラス]

GroundOverlayクラスは、地図にオーバーレイを設置するクラスです。境界(bounding box)を指定すると、その範囲を埋め尽くすように画像が表示されます。

デモ

プログラミング

オーバーレイのインスタンスを作るには、GroundOverlayクラスを利用します。第1引数に画像のパス、第2引数に画像の大きさを表す境界、そして第3引数にオプションオブジェクトを指定して下さい。

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps: 地図の表示</title>
		<!-- スタイルシートの読み込み -->
		<link href="./map.css" rel="stylesheet">
		<!-- Google Mapsライブラリの読み込み -->
		<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	</head>
<body>

<!-- 地図が描画されるキャンパス -->
<div id="map-canvas">ここに地図が表示されます</div>

<!-- JavaScriptの読み込み -->
<script src="./map.js"></script>

</body>
</html>

デモを開く

JavaScript (map.js)

// 地図のインスタンスを作成する
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
	zoom: 15 ,	// ズーム値
	center: new google.maps.LatLng( 35.792621, 139.806513 ) ,	// 中心の位置座標
} ) ;

// LatLngBoundsのインスタンスを作成する
var LatLngBounds = new google.maps.LatLngBounds(
	new google.maps.LatLng( 35.708194 , 139.808565 ) ,
	new google.maps.LatLng( 35.712280 , 139.813619 )
) ;

// オーバーレイのインスタンスを作成する
var groundOverlay = new google.maps.GroundOverlay( "./overlay.png", LatLngBounds, {
	clickable: false ,	// クリックの有効、無効
	map: map ,	// 設置する地図
	opacity: 0.85 ,	// 不透明度
} ) ;

// 地図のビューポートを修正する
map.fitBounds( groundOverlay.getBounds() ) ;

CSS (map.css)

/* 地図キャンパス */
#map-canvas {
	width: 800px ;
	height: 600px ;
}

コンストラクタ

オーバーレイを設置するにはGroundOverlayクラスを利用します。

JavaScript

var circle = new google.maps.GroundOverlay( Image, LatLngBounds|LatLngBoundsLiteral, GroundOverlayOptions )
番号引数説明
第1引数Image画像ファイルのパス。
第2引数LatLngBounds|LatLngBoundsLiteral境界を表すLatLngBoundsクラスのインスタンス、またはLatLngBoundsLiteralオブジェクト。
第3引数GroundOverlayOptionsオーバーレイのオプションを表すGroundOverlayOptionsオブジェクト。

GroundOverlayOptions

// オーバーレイのオプションを設定する (引数に指定)
var GroundOverlayOptions = {
	map: map ,	// 設置する地図
} ;

オプション

オプション名説明
clickableオーバーレイのクリックの有効、無効を調整する。
mapオーバーレイを設置する地図を指定する。
opacityオーバーレイの不透明度を調整を指定する。

メソッド

メソッド名説明
getBounds()オーバーレイの境界(Bounding box)を取得する。
getMap()オーバーレイが設置されている地図を取得する。
getOpacity()オーバーレイの不透明度を取得する。
getUrl()オーバーレイの画像ファイルのURLを取得する。
setMap()オーバーレイを地図に設置する。または地図から取り除く。
setOpacity()オーバーレイの不透明度をセットする。

イベント

イベント名説明
clickオーバーレイをクリックした時に発火するイベント。
dblclickオーバーレイをダブルクリックした時に発火するイベント。

ストリートビュー [StreetViewPanoramaクラス]

StreetViewPanoramaクラスは、ストリートビューを表示するためのクラスです。

デモ

プログラミング

ストリートビューの表示方法は地図と同じです。地図キャンパス(div要素)を指定して、そこに表示します。既に地図が指定してあるキャンパスに、上書きして表示することもできます。

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Google Maps: ストリートビューの表示</title>
		<!-- スタイルシートの読み込み -->
		<link href="./map.css" rel="stylesheet">
		<!-- Google Mapsライブラリの読み込み -->
		<script src="https://maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	</head>
<body>

<!-- ストリートビューが描画されるキャンパス -->
<div id="map-canvas">ここにストリートビューが表示されます</div>

<!-- JavaScriptの読み込み -->
<script src="./map.js"></script>

</body>
</html>

デモを開く

JavaScript (map.js)

// キャンパスの要素を取得する
var canvas = document.getElementById( 'map-canvas' ) ;

// ストリートビューのオプションを設定する
var StreetViewPanoramaOptions = {
	position: new google.maps.LatLng( 35.77605114120131, 139.78860309786995 ) ,	// 位置座標
} ;

// ストリートビューのインスタンスを作成する
var map = new google.maps.StreetViewPanorama( canvas, StreetViewPanoramaOptions ) ;

CSS (map.css)

/* ストリートビューのキャンパス */
#map-canvas {
	width: 800px ;
	height: 600px ;
}

コンストラクタ

地図を表示するには、StreetViewPanoramaクラスを利用します。第1引数には地図キャンパス(div要素)、第2引数にはオプションとなるオブジェクトを指定します。インスタンスを作成した時点でストリートビューは表示されます。インスタンスだけを作成して表示はしたくない場合は、オプションでvisible(表示状態)にfalseを指定しましょう。

JavaScript

var streetViewPanorama = new google.maps.StreetViewPanorama( canvas , StreetViewPanoramaOptions )
番号引数説明
第1引数canvasストリートビューのキャンパスにする要素。
第2引数StreetViewPanoramaOptionsストリートビューのオプションを表すオブジェクト。

オプション

オプション名説明
addressControl住所案内の表示を調整する。
addressControlOptions住所案内の表示位置などを調整する。
clickToGoクリックによる位置変更の有効、無効を調整する。
disableDefaultUIデフォルトで表示されている各コントローラを非表示にする。
disableDoubleClickZoomダブルクリックによるズームアップを禁止する。
enableCloseButtonストリートビューを閉じるボタンの表示を調整する。
fullscreenControlフルスクリーン・コントローラの表示を調整する。
fullscreenControlOptionsフルスクリーン・コントローラの表示位置などを調整する。
imageDateControlストリートビューに表示されている、画像の撮影日の表示を調整する。
linksControl矢印のコントローラの表示を調整する。
motionTrackingモーション・トラッキングの有効、無効を調整する。
motionTrackingControlモーション・トラッキング・コントローラの表示を調整する。
panoストリートビューで表示する場所をパノラマIDで指定する。
positionストリートビューで表示する場所を位置座標で指定する。
pov視点を調整する。
scrollwheelホイール操作によるズーム値の変更の有効、無効を調整する。
showRoadLabels道路名の表示を調整する。
visibleストリートビューの表示状態を調整する。
zoomControlズーム・コントローラの表示を調整する。
zoomControlOptionsズーム・コントローラの表示位置などを調整する。

メソッド

メソッド名説明
getLinks()現在表示している場所の、リンクの情報を取得する。
getLocation()現在表示している場所の情報を取得する。
getMotionTracking()モーション・トラッキングが有効か否かを取得する。
getPano()パノラマIDを取得する。
getPhotographerPov()画像撮影時の方向と角度を取得する。
getPosition()位置座標を取得する。
getPov()操作中のユーザーの視点の情報を取得する。
getStatus()ストリートビューの状態を取得する。
getVisible()表示状態を取得する。
getZoom()ズーム値を取得する。
setLinks()リンクをセットする。
setMotionTracking()モーション・トラッキングの有効、無効をセットする。
setOptions()設定情報を更新する。
setPano()パノラマIDをセットする。
setPosition()位置座標をセットする。
setPov()視点をセットする。
setVisible()表示状態をセットする。
setZoom()ズーム値をセットする。

イベント

イベント名説明
closeclick閉じるボタンをクリックした時に発火するイベント。
pano_changedパノラマIDが変化した時に発火するイベント。
position_changed位置座標が変化した時に発火するイベント。
pov_changed視点が変化した時に発火するイベント。
resizeトリガーで、リサイズによるリフレッシュを行なった時に発火するイベント。
status_changedステータスが変化した時に発火するイベント。
visible_changed表示状態が変化した時に発火するイベント。
zoom_changedズーム値が変化した時に発火するイベント。

リファレンス

各クラス、オブジェクト、定数について、説明しています。

クラス

クラス名説明
Circle円を表示する。
GroundOverlayオーバーレイ(境界いっぱいの画像)を表示する。
InfoWindow吹き出し形式の情報ウィンドウを表示する。
LatLng位置座標のデータを作成する。
LatLngBounds境界(Bounding box)のデータを作成する。
Map地図を表示する。
Markerマーカーを表示する。
Point位置のデータを作成する。
Polygon多角形を表示する。
Polyline線を表示する。
Rectangle境界を可視化した矩形を表示する。
Sizeサイズのデータを作成する。
StreetViewPanoramaストリートビューを表示する。

オブジェクト

オブジェクト名説明
Attributionマイプレイスで表示される場所の補足情報。
CircleOptions円の設定項目をまとめたオブジェクト。
GroundOverlayOptionsオーバーレイの設定項目をまとめたオブジェクト。
Iconマーカーのアイコンを表すオブジェクト。
IconMouseEventPlaceIdが紐付けられた場所をクリックした時などに渡されるオブジェクト。
IconSequenceポリラインに乗せるアイコンを表すオブジェクト。
InfoWindowOptions情報ウィンドウの設定項目をまとめたオブジェクト。
LatLngBoundsLiteral境界を表すオブジェクト。
LatLngLiteral位置座標を表すオブジェクト。
MapOptions地図の設定項目をまとめたオブジェクト。
MarkerLabelマーカーのラベルを表すオブジェクト。
MarkerOptionsマーカーの設定項目をまとめたオブジェクト。
MarkerPlaceマーカーに紐付ける場所の情報をまとめたオブジェクト。
MarkerShapeマーカーがクリックやドラッグに反応する領域を表すオブジェクト。
MouseEventクリックイベントなどでコールバック関数に渡されるオブジェクト。
PolygonOptionsポリゴンの設定項目をまとめたオブジェクト。
PolylineOptionsポリラインの設定項目をまとめたオブジェクト。
PolyMouseEventポリライン、またはポリゴンの編集点をクリックした時などに渡されるオブジェクト。
RectangleOptionsレクタングルの設定項目をまとめたオブジェクト。
StreetViewPanoramaOptionsストリートビューの設定項目をまとめたオブジェクト。
StreetViewPov方向、角度、ズーム値の情報を含むオブジェクト。
SymbolSVGを表すオブジェクト。

定数

定数名説明
Animationマーカーのアニメーションの種類を表す定数。
ControlPositionコントローラの位置を表す定数。
MapTypeControlStyleマップタイプ・コントローラのUIの種類を表す定数。
MapTypeId地図の種類を表す定数。
StreetViewStatusストリートビューの現在の状態を表す定数。
StrokePosition線の位置を表す定数。
SymbolPathSVGのパスの種類を表す定数。
  • Twitter
  • Facebook
  • Google+
  • はてな
  • pocket
  • LINE
更新履歴
2017/02/01 (水)
ストリートビューの表示方法の説明を追加しました。
2016/12/26 (月)
JavaScriptに関する知識が増えてきたので、それを反映させるため、全てのコードを1から書き直しました。
2015/09/03 (木)
「円(Circleクラス)」と「オーバーレイ(GroundOverlay)」の項目を追加しました。サンプルプログラムをダウンロードできるようになりました。
2015/09/02 (水)
文字通り、全部のサンプルプログラムを1から書き直しました…(疲れた)。
2015/09/01 (火)
コンテンツを公開しました。
2015/09/01 (火)
記事をリライトしました。デザインとUIを、さらにスマホ向けにリニューアルしました。SSL通信に対応しました。
コメント