SYNCERのロゴ
アイキャッチ画像

Google Maps JavaScript API

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

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

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

準備 (APIキーの取得)

Google Maps JavaScript APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。

アカウントの用意

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

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

管理画面

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

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

プロジェクトの作成

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

管理画面の右上にあるメニューをクリックして下さい。

プロジェクトの管理画面
プロジェクトの管理画面

プロジェクトの管理画面が出てきます。既に作成している人は、利用するプロジェクトを選択して下さい。まだ作成していない人は、「+」をクリックします。

プロジェクトを作成する
プロジェクトを作成する

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

選択状態を確認する
選択状態を確認する

該当部分に、プロジェクト名が表示されていることを確認しましょう。

APIを有効にする

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

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

管理画面の上部にある、「APIを有効にする」をクリックして下さい。

有効化するAPIを探す
有効化するAPIを探す

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

API名をクリックする
API名をクリックする

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

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

設定画面に移動します。ここで「有効にする」をクリックして下さい。これで、このプロジェクトで「Google Maps JavaScript API」を使えるようになります。「認証情報を作成して下さい」という案内が表示されるかもしれません。認証情報とは、この後に作成するAPIキーのことです。

認証情報(APIキー)の作成

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

仕上げに認証情報(APIキー)を取得しましょう。APIキーは、他のAPI(例えば、Google Maps Static APIなど)と共用することもできます。左メニューにある「認証情報」をクリックして下さい。

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

「認証情報」の設定画面に移動します。「認証情報を作成」をクリックして下さい。

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

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

APIキーが作成される
APIキーが作成される

APIキーが作成されます。このキーを利用して、プログラミングしていきます。お疲れ様でした。作成したAPIキーは、認証情報の画面に一覧表示されます。

APIキーの編集

APIキーの名前をクリックする
APIキーの名前をクリックする

認証情報の画面で、目的のAPIキーの名前部分をクリックして下さい。

APIキーの編集画面
APIキーの編集画面

APIキーの編集画面に移動します。編集後は下部にある「保存」をクリックしないと反映されません。

名前の設定

名前の設定
名前の設定

まずは、後々管理しやすいように、APIキーに名前を付けておきましょう。

キーの制限

制限の設定
制限の設定

名前の下には「キーの制限」という項目があります。他サイトがこのAPIキーを勝手に使えないように設定できます。例えば、ウェブサイトで利用する場合は「HTTPリファラー」を選択して下さい。リファラーを*.syncer.jp/*と設定すれば、ドメインがsyncer.jp以外のウェブページで、このAPIキーを利用できなくなります。

ライブラリを読み込む

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

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

拡張ライブラリ

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

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

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

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

バージョニング

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

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

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

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

バージョンの段階

Google Maps JavaScript APIのバージョンには、「Experimental」「Release」「Frozen」の3段階が存在します。

説明
Experimental開発段階のバージョン。最新の機能が含まれるが、変更されることも多い。動作は安定しないので、製品に利用するのは非推奨。
Release動作が安定したバージョン。この段階のバージョンは、バグ修正で変更されることはある。
Frozen一切、修正されない古いバージョン。

更新状況は公式のリリースノートで確認できます。

リリースノート
オープングラフ画像
Google Maps JavaScript APIのリリースノート。更新情報など。

ローカライズ

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

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

言語の一覧

利用できる主な言語の一覧です。

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

コールバック

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

<!-- コールバック関数を指定する -->
<script src="//maps.googleapis.com/maps/api/js?key={APIキー}&callback=runFunc" async></script>
function runFunc() {
	// ライブラリの読み込み完了時に実行したい内容
}

地図 [Mapクラス]

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

デモ

プログラミング

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

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

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<!-- canvas -->
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 35.7100, 139.8107 ) ,
	zoom: 11 ,
} ) ;
	</script>
</body>
</html>

コンストラクタ

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

// <div id="map-canvas"></div>
var mapDiv = document.getElementById( "map-canvas" ) ;

// 地図のオプション
var mapOptions = {
	center: new google.maps.LatLng( 35.7100, 139.8107 ) ,	// 位置座標
	zoom: 11 ,	// ズーム値
} ;

// インスタンスを作成
var map = new google.maps.Map( mapDiv , mapOptions ) ;

オプション

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

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?libraries=places&key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

// Map
var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 35.71, 139.8107 ) ,
	zoom: 11 ,
} ) ;

// Marker
var marker = new google.maps.Marker( {
	map: map ,
	position: new google.maps.LatLng( 35.71, 139.8107 ) ,
} ) ;
	</script>
</body>
</html>

コンストラクタ

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

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

// インスタンスを作成
var marker = new google.maps.Marker( markerOptions ) ;

オプション

名前説明
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

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?libraries=places&key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

// Map
var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 35.71, 139.8107 ) ,
	zoom: 11 ,
} ) ;

// InfoWindow
var infoWindow = new google.maps.InfoWindow( {
	position: new google.maps.LatLng( 35.71, 139.8107 ) ,
	content: "SYNCER" ,
} ) ;

infoWindow.open( map ) ;
	</script>
</body>
</html>

コンストラクタ

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

// 情報ウィンドウのオプション
var infoWindowOptions = {
	content: "SYNCER" ,	// 表示する内容
} ;

// インスタンスを作成
var infoWindow = new google.maps.InfoWindow( infoWindowOptions ) ;

// ウィンドウを開く
infoWindow.open( map ) ;

オプション

名前説明
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

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?libraries=places&key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

// Map
var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 35.71, 139.8107 ) ,
	zoom: 11 ,
} ) ;

// Polyline
var polyline = new google.maps.Polyline( {
	map: map ,
	path: [
		new google.maps.LatLng( 32.3738, 131.1350 ) ,
		new google.maps.LatLng( 35.7406, 139.9241 ) ,
	] ,
} ) ;

// fit bounds
var latLngBounds = new google.maps.LatLngBounds() ;

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

map.fitBounds( latLngBounds ) ;
	</script>
</body>
</html>

コンストラクタ

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

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

// インスタンスを作成
var polyline = new google.maps.Polyline( polylineOptions ) ;

オプション

名前説明
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

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?libraries=places&key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

// Map
var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 35.71, 139.8107 ) ,
	zoom: 11 ,
} ) ;

// Polygon
var polygon = new google.maps.Polygon( {
	map: map ,
	paths: [
		new google.maps.LatLng( 32.3738, 131.1350 ) ,
		new google.maps.LatLng( 35.7406, 139.9241 ) ,
		new google.maps.LatLng( 43.0475, 141.9016 ) ,
		new google.maps.LatLng( 35.4547, 133.3762 ) ,
	] ,
} ) ;

// fit bounds
var latLngBounds = new google.maps.LatLngBounds() ;

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

map.fitBounds( latLngBounds ) ;
	</script>
</body>
</html>

コンストラクタ

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

// ポリゴンのオプション
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 ) ,
	] ,
} ;

// インスタンスを作成
var polygon = new google.maps.Polygon( polygonOptions ) ;

オプション

名前説明
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

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?libraries=places&key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

// Map
var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 35.71, 139.8107 ) ,
	zoom: 11 ,
} ) ;

// Rectangle
var rectangle = new google.maps.Rectangle( {
	map: map ,
	bounds: new google.maps.LatLngBounds(
		new google.maps.LatLng( 32.6868, 132.2624 ) ,
		new google.maps.LatLng( 34.4353, 134.7123 )
	) ,
} ) ;

// fit bounds
map.fitBounds( rectangle.getBounds() ) ;
	</script>
</body>
</html>

コンストラクタ

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

// レクタングルのオプション
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 )
	)  ,
} ;

// インスタンスを作成
var rectangle = new google.maps.Rectangle( rectangleOptions ) ;

オプション

名前説明
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

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?libraries=places&key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

// Map
var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 35.71, 139.8107 ) ,
	zoom: 11 ,
} ) ;

// Circle
var circle = new google.maps.Circle( {
	map: map ,
	center: new google.maps.LatLng( 35.71, 139.8107 ) ,
	radius: 800 ,
} ) ;

// fit bounds
map.fitBounds( circle.getBounds() ) ;
	</script>
</body>
</html>

コンストラクタ

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

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

// インスタンスを作成
var circle = new google.maps.Circle( circleOptions ) ;

オプション

名前説明
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

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?libraries=places&key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

// Map
var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 35.71, 139.8107 ) ,
	zoom: 11 ,
} ) ;

// GroundOverlay
var groundOverlay = new google.maps.GroundOverlay(
	"./overlay.svg" ,
	new google.maps.LatLngBounds(
		new google.maps.LatLng( 35.708194, 139.808565 ) ,
		new google.maps.LatLng( 35.712280, 139.813619 )
	) , {
		map: map ,
	}
) ;

// fit bounds
map.fitBounds( groundOverlay.getBounds() ) ;
	</script>
</body>
</html>

コンストラクタ

オーバーレイを設置するにはGroundOverlayクラスを利用します。第1引数に画像のパス、第2引数に画像を表示する範囲、第3引数にオプションとなるオブジェクトを指定して下さい。

// 画像
var image = "./overlay.svg" ;

// 境界 (bounding box)
var latLngBounds = new google.maps.LatLngBounds(
	new google.maps.LatLng( 35.708194, 139.808565 ) ,
	new google.maps.LatLng( 35.712280, 139.813619 )
) ;

// オーバーレイのオプション
var groundOverlayOptions = {
	map: map ,	// 設置する地図
} ;

// インスタンスを作成
var groundOverlay = new google.maps.GroundOverlay( image, latLngBounds, groundOverlayOptions ) ;

オプション

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

メソッド

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

イベント

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

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

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

デモ

プログラミング

ストリートビューの表示方法は地図と同じです。キャンパス(div要素)を用意して、そこに表示します。

<!DOCTYPE html>
<html>
<head>
	<style>
#streetview-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="streetview-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?libraries=places&key={APIキー}"></script>
	<script>
var container = document.getElementById( "streetview-canvas" ) ;

// StreetViewPanorama
var streetViewPanorama = new google.maps.StreetViewPanorama( container, {
	position: new google.maps.LatLng( 35.77605114120131, 139.78860309786995 ) ,
} ) ;
	</script>
</body>
</html>

コンストラクタ

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

// <div id="streetview-canvas"></div>
var container = document.getElementById( "streetview-canvas" ) ;

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

// インスタンスを作成
var streetViewPanorama = new google.maps.StreetViewPanorama( container , streetViewPanoramaOptions ) ;

オプション

名前説明
addressControl住所案内の表示を調整する。
addressControlOptions住所案内の表示位置などを調整する。
clickToGoクリックによる位置変更の有効、無効を調整する。
disableDefaultUIデフォルトで表示されている各コントローラを非表示にする。
disableDoubleClickZoomダブルクリックによるズームアップを禁止する。
enableCloseButtonストリートビューを閉じるボタンの表示を調整する。
fullscreenControlフルスクリーン・コントローラの表示を調整する。
fullscreenControlOptionsフルスクリーン・コントローラの表示位置などを調整する。
imageDateControlストリートビューに表示されている、画像の撮影日の表示を調整する。
linksControl矢印のコントローラの表示を調整する。
motionTrackingモーション・トラッキングの有効、無効を調整する。
motionTrackingControlモーション・トラッキング・コントローラの表示を調整する。
motionTrackingControlOptionsモーション・トラッキング・コントローラの表示位置などを調整する。
panControlパン・コントローラの表示を調整する。
panControlOptionsパン・コントローラの表示位置などを調整する。
panoストリートビューで表示する場所をパノラマidで指定する。
positionストリートビューで表示する場所を位置座標で指定する。
pov視点を調整する。
scrollwheelホイール操作によるズーム値の変更の有効、無効を調整する。
showRoadLabels道路名の表示を調整する。
visibleストリートビューの表示状態を調整する。
zoomズーム値を調整する。
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アイコンのオプションを表すオブジェクト。
IconMouseEventアイコンをクリックした時のイベントオブジェクト。
IconSequenceポリラインに乗せるアイコンを表すオブジェクト。
InfoWindowOptions情報ウィンドウのオプションを表すオブジェクト。
LatLngBoundsLiteral境界(bounding box)のオプションを表すオブジェクト。
LatLngLiteral位置座標のオプションを表すオブジェクト。
MapOptions地図のオプションを表すオブジェクト。
MapTypeStyle地図のスタイルの内容を含むオブジェクト。
MarkerLabelマーカーラベルのオプションを表すオブジェクト。
MarkerOptionsマーカーのオプションを表すオブジェクト。
MarkerPlaceマーカーの場所情報のオプションを表すオブジェクト。
MarkerShapeマーカーの有効領域のオプションを表すオブジェクト。
MouseEventクリックした時のイベントオブジェクト。
PolyMouseEventポリゴンをクリックした時のイベントオブジェクト。
PolygonOptionsポリゴンのオプションを表すオブジェクト。
PolylineOptionsポリラインのオプションを表すオブジェクト。
RectangleOptionsレクタングルのオプションを表すオブジェクト。
StreetViewPanoramaOptionsストリートビューのオプションを表すオブジェクト。
StreetViewPovストリートビューの視点のオプションを表すオブジェクト。
SymbolSVGのオプションを表すオブジェクト。

定数

名前説明
Animationアニメーションの種類を表す定数。
ControlPositionコントローラの位置を表す定数。
MapTypeControlStyleマップタイプコントローラのデザインの種類を表す定数。
MapTypeId地図の種類を表す定数。
ScaleControlStyleスケールコントローラのデザインの種類を表す定数。
StrokePositionポリゴンやレクタングルの、線の位置を表す定数。
SymbolPathSVGパスの種類を表す定数。
更新履歴
2017年7月5日 (水)
サインインの機能が廃止されたため、説明を削除しました。
2017年2月1日 (水)
ストリートビューの表示方法の説明を追加しました。
2016年12月26日 (月)
JavaScriptに関する知識が増えてきたので、それを反映させるため、全てのコードを1から書き直しました。
2015年9月3日 (木)
「円(Circleクラス)」と「オーバーレイ(GroundOverlay)」の項目を追加しました。サンプルプログラムをダウンロードできるようになりました。
2015年9月2日 (水)
文字通り、全部のサンプルプログラムを1から書き直しました…(疲れた)。
2015年9月1日 (火)
コンテンツを公開しました。
2015年9月1日 (火)
記事をリライトしました。デザインとUIを、さらにスマホ向けにリニューアルしました。SSL通信に対応しました。