Google Maps v3の利用 -(3)マーカーを画像に変更する-

前回までは"大阪駅"を中心とする地図を表示し、そこに対してマーカーを立てるところまで実装している。
->Google Maps v3の利用 -(2)マーカーの表示-

今回は立てたマーカーをデフォルトのものから任意の画像に変更する。
前回のソース中、「MarkerImage」含め6行を追加する。


// ▽マーカー
var marker = new google.maps.Marker({
position: new google.maps.LatLng(34.702306, 135.495824),
map: map,
title: "大阪駅"
});
// △マーカー



 ↓


// ▽マーカー
var marker = new google.maps.Marker({
position: new google.maps.LatLng(34.702306, 135.495824),
map: map,
title: "大阪駅",
icon: new google.maps.MarkerImage(
'icon.png', // 画像パス
new google.maps.Size(18, 28), // 画像サイズ
new google.maps.Point(0, 0), // 画像の起点座標
new google.maps.Point(9, 28) // 画像から見たマーカーの位置
)
});
// △マーカー



これをブラウザで見ると次のようになる。

 マーカーの画像変更


今回は地図表示するHTMLファイルと画像を同じディレクトリに置いているのでファイル名だけになっているが、階層が違う場合は相対パスまたは絶対パスで指定する。


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック