Googleマップにアイコンを設置する方法
皆さんに必要とされるコーダーになりたい！
スキルアップしたい！
と常に思っている、どうもkakeoです。
みなさん、せっかく上手くデザインされたWebサイトの中にデェフォルトの
Googleマップがあるとなんだか、物足りないと感じることがありませんか？
ありきたりなGoogleマップでは満足出来ない！
少しでもオリジナル感を出したい！
と感じている方には朗報です！！
Googleマップのデザインをカスタマイズする方法はいくつかありますが、
今回はとても簡単な方法ですぐに実装できる方法を紹介させていただきます！
まずは下記サイトをご覧ください。
サイト内の
①「Googleマップデザインカスタマイズコード生成ツール」の各入力項目を埋める
②「地図を生成、コードを再出力する」のボタンを押下
③ 生成されたコードを自分が作成したhtmlにコピペ
④ javascript内の「icon.png」の画像パスを変更する
手順はサイトに記述してある通りですが、、、(￣ ￣；
下記は自分が実際に設置した物です。
<生成されたjavascriptファイル内の変更した箇所>
/*アイコン設定*/
var icon = new google.maps.MarkerImage(‘../common/img/gmap_icon.png’,/*画像url*/
../common/img/gmap_icon.png のパスを変更
new google.maps.Size(43,59),/*アイコンサイズ*/
(43,59)の数字を、自分が作成したアイコンサイズに書換えてください。
title: ‘Studio’,/*タイトル*/
Studio の部分
var styledMapOptions = { name: ‘Studio’ }/*地図右上のタイトル*/
Studio の部分
これだけでほんと簡単にGoogleマップにアクセントを付けることで出来ました。
アイコンが上からスルっと落ちてきます！
面白いですよね！！
他に沢山のカスタマイズ方法がありますが、javascriptが得意ではないこの私が…汗
この方法でとても簡単に実装することができました。
コーダーとしてまだ未熟者なので、こんな便利なツールを見ると刺激になるし、より一層頑張らなければと
改めて思うわけで。。。
早く一人前のコーダーになりたい！！
と思った今日この頃でしたｗｗ
