Google Map カスタマイズ　icon編

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の２種類ありました。 たくさんマーカーを作成するのに、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を適用させていたら２を、BOUNCEのanimationを適用させていたら１を返し、それ以外はundefinedを返す関数です。