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: ‘マーカーですよ！’
とする