Google Map カスタマイズ icon編

nissy 216views 更新:2016年4月4日
function create_marker(lat, lng, title) {
            var icon = new google.maps.MarkerImage('iconのurl'(pathでもok), /*アイコンの場所*/
                    new google.maps.Size(12,12), /*アイコンのサイズ*/
                    new google.maps.Point(0, 0), /*アイコンの位置(適当な座標を入れる)*/
                    new google.maps.Point(16, 16) // anchor(適当な座標を入れる)
            );

            var marker_options = {
                map: map_canvas,
                position: new google.maps.LatLng(lat, lng),
                zIndex: 0,
                title: title,
          icon: icon,
                animation: google.maps.Animation.DROP
            };
       var marker = new google.maps.Marker(marker_options);
     };

iconのカスタマイズ方法は、こんな感じになりますが、、、、実際に表示させるまでは至りませんでした。 主に変更できる点は、iconとanimationのところになります。animationは、DROPのほかにBOUNCEの2種類ありました。 たくさんマーカーを作成するのに、bounceだと気持ち悪いと思い今回はdropにしました(実際に気持ち悪かったです、、) iconの位置やanchorの位置の設定は、こちらに詳しく書いてあります。 http://lopan.jp/google-map-customize/

追記 アイコンをクリックすると、跳ねるようにアニメーションを実装してみました。

  var marker = new google.maps.Marker(marker_options);
            google.maps.event.addListener(marker, 'click', toggleBounce);

            //     add animation

            function toggleBounce() {
                if (marker.getAnimation() != null) {
                    /* アニメーション無効化 */
                    marker.setAnimation(null);
                } else {
                    /* アニメーション(飛び跳ねる) */
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            }

ポイントとしては、google.maps.event.addListenerの使い方です。 今回は、markerがclickされた時にtoggleBounceという関数を適用させるようにしています。 Wordpressのプラグイン開発で学んだ、フックとadd_actionの使い方に近い気がしました。 またmarkar.getAnimation()は、markerにDROPのanimationを適用させていたら2を、BOUNCEのanimationを適用させていたら1を返し、それ以外はundefinedを返す関数です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません