[JavaScript] Google Maps API V3 でオリジナルのMarkerアイコンを追加してみた

[JavaScript] Google Maps API V3 でオリジナルのMarkerアイコンを追加してみた

Google Maps API V3 で、地図上にオリジナルのMarkerアイコンを追加してみました。

Reference

Google公式のリファレンスを参考にしました。

Markerアイコンを追加する

表示した地図にオリジナルのMarkerアイコンを追加してみました。

1. Mapクラスを生成

MapOptionsオブジェクトの設定して、Mapクラスの引数に指定します。

var op={
  zoom:15,
  center:new google.maps.LatLng(35.507456,139.617585),
  mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map_canvas"),op);

2. MarkerImageオブジェクトの設定

Markerアイコンを追加するために、前面のアイコンと影の画像を設定するための MarkerImageオブジェクトを生成します。

影の画像は Shadowmaker で作る事ができます。　　
以下のサイトで Start Shadowmaker をクリックして、Image から用意したアイコンを選択したら Make shadow をクリックして、生成された影の画像をダウンロードしてください。

MarkerImageオブジェクトの設定は（画像のURL、画像のサイズ、画像のposition、画像のアンカーの位置、画像全体の拡大/縮小サイズ）を指定します。画像全体の拡大/縮小サイズは、オプションなのでとりあえず省略します。

また、Shadowmaker で出力されたアンカー位置の値は画像の中心になっているので、今回のようにマーカー画像が旗の形になっている場合ではアンカーの位置が左下 (0, 64.0) になるように修正を加えます。

var image=new google.maps.MarkerImage(
  "marker.png",                     //画像のURL
  new google.maps.Size(48.0,64.0),  //画像のサイズ
  new google.maps.Point(0,0),       //画像のposition
  new google.maps.Point(0,64.0)     //画像のアンカーの位置
);
var shadow=new google.maps.MarkerImage(
  "shadow.png",                     //影の画像のURL
  new google.maps.Size(81.0,64.0),  //影の画像のサイズ
  new google.maps.Point(0,0),       //影の画像のposition
  new google.maps.Point(0,64.0)     //影の画像のアンカーの位置
);

3. MarkerOptionsオブジェクトの設定

MarkerOptionsオブジェクトの設定をします。
MarkerOptionsオブジェクトの基本的な設定は、position、map を指定します。

更に、オリジナルのMarkerアイコンを追加するためには、生成したMarkerImageオブジェクトを icon と shadow に指定します。
icon を省略すると、デフォルトのマーカーアイコンになります。

var obj={
  position:new google.maps.LatLng(35.507456,139.617585),
  map:map,
  icon:image,
  shadow:shadow
};
  • position（マーカーの位置）
  • map（マーカーを表示する地図）
  • icon（前面のアイコン）
  • shadow（影の画像）

他にも、マーカードラッグの指定、ロールオーバー テキストの設定などがあります。

  • draggable（true の場合マーカーをドラッグすることができます）
  • title（ロールオーバー テキスト）

4. Markerクラスを生成

Markerクラスを生成して、MarkerOptionsオブジェクトを引数に指定します。

<html lang="ja">
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript">
// <![CDATA[
window.onload=function(){
  var op={
    zoom:15,
    center:new google.maps.LatLng(35.507456,139.617585),
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("map_canvas"),op);

  var image=new google.maps.MarkerImage(
    "marker.png",
    new google.maps.Size(48.0,64.0),
    new google.maps.Point(0,0),
    new google.maps.Point(0,64.0)
  );
  var shadow=new google.maps.MarkerImage(
    "shadow.png",
    new google.maps.Size(81.0,64.0),
    new google.maps.Point(0,0),
    new google.maps.Point(0,64.0)
  );
  var obj={
    position:new google.maps.LatLng(35.507456,139.617585),
    map:map,
    icon:image,
    shadow:shadow
  };
  var marker=new google.maps.Marker(obj);
}
// ]]>
</script>
</head>
<body>
<div id="map_canvas" style="width:550px;height:400px"></div>
</body>

サンプル

以上、こんな感じでした。

  • 2011.04.04
  • Hiroaki Komatsu