Marker
Markerクラスはマーカーを表示するためのクラスです。
構文
パラメータ
opts
マーカーのオプションとなるオブジェクト。マーカーをクリックできるか、ドラッグで動かせるか、などの設定は、このオブジェクトの内容で決まります。
返り値
Marker
Markerクラスのインスタンス。このインスタンスにメソッドを実行したりイベントを設定してマーカーを操作できる。
デモ
マーカーを作成するデモです。作成する時のオプションをいくつか、値を変更して試すことができます。オプションの詳細は、MarkerOptionsオブジェクトの項目をご参考下さい。
var marker = new google.maps.Marker( {
map: map ,
position: new google.maps.LatLng( 35.71, 139.8107 ) ,
} ) ;
サンプルコード
インスタンスの作成
var marker = new google.maps.Marker( {
map: map ,
position: new google.maps.LatLng( 35.71, 139.8107 ) ,
} ) ;
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?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>
オプション
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を設定した時に発火するイベント。 |
参考
- Google Maps JavaScript API: Marker
- Googleの公式リファレンス。