FC2ブログ

google map のマーカーオプション変更

google map のマーカーオプション変更

#06 マーカーのオプションを変更する
http://dotinstall.com/lessons/basic_google_maps/3506
を参考に
アイコンを変更したり
マーカーをドラッグ可能にしたりと
オプションを変更することでより利用しやすくする

アイコンの変更は地図アプリなどに使えそう

Markerが取り得るオプションについては
https://developers.google.com/maps/documentation/javascript/reference?hl=ja&csw=1#MarkerOptions
を参照

この中の
draggable はドラッグできるかどうかを設定する
デフォルトは false
true にするとドラッグできる
var marker = new google.maps.Marker()
の中で
draggable: true
と追記すれば
ドラッグ可能になる

アイコンの変更は
icon: new google.maps.MarkerImage('画像ファイル名');
とする
ちなみに、動画ではすでにアイコンを用意してあるけど
自分の環境ではまだないので
http://toshiiy.blog22.fc2.com/?tag=%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3
を参考にフリー画像をみてみました

その中で、今回は
商用利用可能なフリー素材を効率よく収集する方法
http://toshiiy.blog22.fc2.com/blog-entry-73.html

見ましたが、最終的には
http://www.tutorial9.net/downloads/designer-icons-professionally-hand-crafted-free-icon-set/
からダウンロードしてきたものを

cd ダウンロード/
unzip Tutorial9-Designer-Iconset.zip
cp tutorial9_pencil.png /var/www/gmap/
でコピーして
icon: new google.maps.MarkerImage('tutorial9_pencil.png'),
としました


注意点としては
画像サイズの補正はしてくれないので
アイコンサイズ画像を用意する必要があること
これは、画像を作成して
PHPで作る「画像掲示板」
のようなもので、サイズ補正したほうが
効率的かもしれない

title を設定すると
マーカーをマウスオーバーしたときにメッセージがでるようになる
もし、マーカーをマウスオーバーしたとき
マーカーですよ!
と表示するなら
title: 'マーカーですよ!'
とする
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック