【Google Map】Javascriptのメソッド

【Google Map】
Javascriptのメソッド




GoogleのAPI「Google Map Javascript」で、
地図の上をスクロールで通貨すると、地図が縮小する現象が面倒だったので、
GoogleMapの設定で、スクロールを無効にした時のメモです。



地図 [Mapクラス]


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

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

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

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





コンストラクタ

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

JavaScript
var map = new google.maps.Map( canvas , MapOptions )


番号引数説明
第1引数canvas地図のキャンパスにする要素。
第2引数MapOptions地図のオプションを表すオブジェクト。

canvas

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

MapOptions


// 地図のオプションを設定する (第2引数に指定)
var mapOptions = {
zoom: 15 , //ズーム値
center: new google.maps.LatLng( 35.681177, 139.766751 ) , //中心の位置座標

// 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クラス]


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

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




コンストラクタ

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

JavaScript

var marker = new google.maps.Marker( MarkerOptions )

番号引数説明
第1引数MarkerOptionsマーカーのオプションを表すオブジェクト。

MapOptions

// マーカーのオプションを設定する (引数に指定)
var MarkerOptions = {
map: map , // 設置する地図

position: new google.maps.LatLng( 35.681177, 139.766751 ) , // 位置座標
} ;




オプション
オプション名デフォルト説明
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クラス]


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

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

infoWindow.open( map ) ;




コンストラクタ

情報ウィンドウを設置するには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クラス]


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

// ポリラインのインスタンスを作成する
var polyline = new google.maps.Polyline( {
map: map ,
path: [
new google.maps.LatLng( 35.681177, 139.766751 ) ,
new google.maps.LatLng( 35.581177, 139.666751 ) ,
] ,
} ) ;

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

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

map.fitBounds( latLngBounds ) ;




コンストラクタ

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

JavaScript

var polyline = new google.maps.Polyline( PolylineOptions )

番号引数説明
第1引数PolylineOptionsポリラインのオプションを表すオブジェクト。

PolylineOptions

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




オプション
オプション名デフォルト説明
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クラス]


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

// ポリゴンのインスタンスを作成する
var polygon = new google.maps.Polygon( {
map: map ,
paths: [
new google.maps.LatLng( 35.681177, 139.766751 ) ,
new google.maps.LatLng( 35.581177, 139.666751 ) ,
new google.maps.LatLng( 35.481177, 139.566751 ) ,
new google.maps.LatLng( 35.381177, 139.466751 ) ,
] ,
} ) ;

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

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

map.fitBounds( latLngBounds ) ;




コンストラクタ

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

JavaScript

var polygon = new google.maps.Polygon( PolygonOptions )

番号引数説明
第1引数PolygonOptionsポリゴンのオプションを表すオブジェクト。

PolygonOptions

// ポリゴンのオプションを設定する (引数に指定)
var PolygonOptions = {
map: map , // 設置する地図
paths: [ // 多角形の角となる位置座標 (任意の数)
new google.maps.LatLng( 35.681177, 139.766751 ) ,
new google.maps.LatLng( 35.581177, 139.666751 ) ,
new google.maps.LatLng( 35.481177, 139.566751 ) ,
new google.maps.LatLng( 35.381177, 139.466751 ) ,
] ,
} ;





オプション
オプション名デフォルト説明
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クラス]


var map = new google.maps.Map( document.getElementById( 'map-canvas' ), {
zoom: 15 , // ズーム値
center: new google.maps.LatLng( 35.681177, 139.766751 ) , // 中心の位置座標
} ) ;

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

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




コンストラクタ

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

JavaScript

var rectangle = new google.maps.Rectangle( RectangleOptions )

番号引数説明
第1引数RectangleOptions多角形のオプションを表すオブジェクト。

RectangleOptions

// レクタングルのオプションを設定する (引数に指定)
var RectangleOptions = {
map: map , // 設置する地図
bounds: new google.maps.LatLng( 35.681177, 139.766751 )
new google.maps.LatLng( 35.581177, 139.666751 ) ,
new google.maps.LatLng( 35.481177, 139.566751 )
) ,
} ;




オプション
オプション名デフォルト説明
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クラス]


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

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

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




コンストラクタ

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

JavaScript

var circle = new google.maps.Circle( CircleOptions )

番号引数説明
第1引数CircleOptions円のオプションを表すオブジェクト。


CircleOptions

// 円のオプションを設定する (引数に指定)
var CircleOptions = {
map: map , // 設置する地図
center: new google.maps.LatLng( 35.681177, 139.766751 ) , // 中心の位置座標
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クラス]

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

// LatLngBoundsのインスタンスを作成する
var LatLngBounds = new google.maps.LatLngBounds(
new google.maps.LatLng( 35.681177, 139.766751 ) ,
new google.maps.LatLng( 35.381177, 139.366751 )
) ;

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

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




コンストラクタ

オーバーレイを設置するには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クラス]


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

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

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




コンストラクタ

地図を表示するには、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ズーム値が変化した時に発火するイベント。