• 小
  • 中
  • 大

マーカーの作成


地図上に目印をつける目的で使用されるのがマーカーです。
下のような形で地図上で表示されます。

表示例 マーカー



マーカーを表示させる為の準備として、はじめにマーカーを表すMarkerクラスのオブジェクトを作成します。コンストラクタ関数は次のように定義されています。


Marker(opts?:MarkerOptions)
指定されたオプションを使用してマーカーを作成します。
地図が指定されている場合、構築するときに地図にマーカー
が追加されます。マーカーを表示するためには位置を設定し
ておく必要があることに注意してください。

オプションである1番目の引数にはマーカーを表示する対象となる地図や座標などを設定するために使用するMarkerOptionsオブジェクトを指定します。引数を省略した場合は用意されているmethodなどを使って設定します。

マーカーの場合、MarkerOptionsオブジェクトの「map」プロパティに値を指定してMarkerオブジェクトを作成すると、作成した時点で地図(またはストリートビュー)上にマーカーが表示されます。

次のように記述します。
var marker1 = new google.maps.Marker();
var latlng = new google.maps.LatLng(35.658704,139.745408);
var marker2 = new google.maps.Marker({
positon: latlng
});

1つ目は引数を省略したもの。2つ目はMarkerOptionsオブジェクトを指定したものです。

MarkerOptionsオブジェクト

マーカーには必ず座標を指定する必要があり、地図上に表示するには対象となる地図かストリートビューを指定する必要があります。

マーカーに必要な設定を記述するために使用するのがMarkerOptionsオブジェクトです。このオブジェクトには次のようなパラメータが定義されています。

プロパティタイプ説明
clickablebooleantrue の場合、マーカーはマウス イベントとタッチ イベントを受け取ります。デフォルト値は true です。
cursorstringマウスオーバー時に表示されるマウスのカーソル。
draggablebooleantrue の場合、マーカーをドラッグすることができます。デフォルト値は false です。
flatbooleantrue の場合、マーカーの影は表示されません。
iconstring|MarkerImage前面のアイコン。
mapMap|StreetViewPanoramaマーカーを表示する地図。
positionLatLngマーカーの位置。必須です。
shadowstring|MarkerImage影の画像
shapeMarkerShapeドラッグ/クリック用の画像マップの領域定義。
titlestringロールオーバー テキスト
visiblebooleantrue の場合、マーカーが表示されます。
zIndexnumber地図上のすべてのマーカーが zIndex 順に表示され、高い値のマーカーは低い値のマーカーより前に表示されます。デフォルトでは、マーカーは緯度に従って表示され、低い緯度のマーカーが高い緯度のマーカーより前に表示されます。

「positon」プロパティは必須です。マーカーを表示する座標を指定します。

実際には次のようにオブジェクトを作成します。
var latlng = new google.maps.LatLng(35.658704,139.745408);
var mopts = {
positon: latlng,
map: map
};

作成したオブジェクトリテラルを引数に指定してMarkerクラスのオブジェクトを作成します。
var latlng = new google.maps.LatLng(35.658704,139.745408);
var mopts = {
positon: latlng,
map: map
};
var marker = new google.maps.Marker(mopts);

又は

var latlng = new google.maps.LatLng(35.658704,139.745408);
var marker = new google.maps.Marker({
positon: latlng,
map: map
});

これで座標が指定されたマーカーが作成されました。「map」プロパティも指定されているので作成と同時に地図上に表示されます。

MarkerOptionsオブジェクトの再設定

Markerクラスのオブジェクトを作成する時にMarkerOptionsオブジェクトを指定しましたが、Markerクラスのオブジェクトを作成した後に別のMarkerOptionsオブジェクトを設定することもできます。

再度設定を行うにはMarkerクラスで用意されている「setOptions」methodを使います。

setOptions(options:MarkerOptions)

引数に再設定したいMarkerOptionsオブジェクトを指定します。次のように使用します。
var latlng = new google.maps.LatLng(35.658704,139.745408);
var mopts1 = {
positon: latlng
};

var marker = new google.maps.Marker(mopts1);

var mopts2 = {
title: 'title',
};

サンプルコード

サンプル.js


function initialize() {
var latlng = new google.maps.LatLng(35.658425,139.737254);
var opts = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);

var m_position1 = new google.maps.LatLng(35.658704,139.745408);
var marker1 = new google.maps.Marker({
position: m_position1,
map: map
});

var m_position2 = new google.maps.LatLng(35.66046931,139.7293353);
var marker2 = new google.maps.Marker({
position: m_position2,
map: map
});
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>


表示例 マーカーの作成


Google Maps サンプル > マーカーの作成