oitake blog

いろいろリンク

おすすめリンク

最近のエントリー

カテゴリー

20101012:コメントとトラックバックを停止したことにより、このサイトはアーカイブとなりました。以降、ご連絡はみもねるのウェブサイトへお願いします。
20100703:新ナマコメ(ナマコメ 2)を公開しました。コメントビューア付きで送信面においてもパワーアップしています。
旧ナマコメは将来的に使用できなくする予定なので、可能な限り新ナマコメをお使いください。
20091127:oitake は みもねる になりました。当ブログは無期限更新停止となります。詳細は最新の記事をご覧ください。

スポンサーサイト

一定期間更新がないため広告を表示しています


2009.12.16 Wednesday | | - | - | -

ぐるペパ:マウスホイールでGoogle Mpasを拡大・縮小

 今回はぐるペパに「マウスホイールによる地図の拡大・縮小機能」を実装しました。ホイールをグリグリすると地図が拡大されたり縮小されたりします。Google Mapsのナビゲーションを使うより、ずっと楽です。

 実は、実装にあたって1時間ほどハマりました。ネットで収集したスクリプトをそのままペーストしてもエラーが出てしまうのです。サンプルページのソースコードと比較しても、ほとんど同じ状態。目を皿にして調べたところ、やっとわかりました。Google Mapsのバージョンです。
 Google Mapsの外部.jsファイルを読み込む際、GET値に「v=2」として読み込んでいるのですが、サンプルでは「v=1」として読み込んでいました。旧バージョンでしか存在しない関数を呼び出していたわけですね。簡単な話でした…なのに1時間もわからなかったのは、バックグラウンドでニコニコ動画を垂れ流していたせいです。作業中に観るものじゃないですね(ー"ー;)

 記事の続きにGoogle Mapsをマウスホイールでグリグリするスクリプトを掲載しておきます。バージョン2を利用している方は参考までにどうぞ。IE6/7・Firefox・Safariで動作します。Operaでは動作しません。元ネタはこちら

var map_dom=document.getElementById("{Google MapsのID属性値}");
GEvent.addDomListener(map_dom,"mousewheel",wheelZoom);
GEvent.addDomListener(map_dom,"DOMMouseScroll",wheelZoom);

function wheelZoom(event)
{
    if(window.event)
    {
        event.returnValue=false;
    }
    if(event.cancelable)
    {
        event.preventDefault();
    }
    if((event.detail || -event.wheelDelta)<0)
    {
        {GMap2クラスのインスタンス}.zoomIn();
    }
    else
    {
        {GMap2クラスのインスタンス}.zoomOut();
    }
}
2007.05.23 Wednesday | 16:50 | ぐるペパ | comments(0) | trackbacks(0)

スポンサーサイト


2009.12.16 Wednesday | 16:50 | - | - | -