LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

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

<<   作成日時 : 2012/05/14 19:10   >>

ブログ気持玉 0 / トラックバック 0 / コメント 1

前回までは"大阪駅"を中心とする地図を表示し、そこに対してマーカーを立てるところまで実装している。
->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件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(1件)

内 容 ニックネーム/日時
I was suggested this website by my cousin. I am not sure whether this post is written by him as no one
else know such detailed about my problem. You are amazing!
Thanks!
Nickolas
URL
2017/07/31 12:41

コメントする help

ニックネーム
URL(任意)
本 文
Google Maps v3の利用 -(3)マーカーを画像に変更する- LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる