「Google Mapsを用いた地図表示」のカスタマイズについて

[bcacsato]

いつもお世話になってます。

http://cms.al-design.jp/sample/maplog/maplog_map.php
↑
こちらのようなサイトを作成したいと思っているのですが、
マーカーをクリックすると吹き出しを表示するのではなく、
マウスオンで吹き出しを表示し、クリックするとエントリページにジャンプるすようにしたいと思っています。

このようにする場合、どのように設定すればよいのでしょうか？

CMSデザイナーのサポート範囲外なのかもしれませんが、
もしよろしければ教えてくださいませ。


〜以下、追記です。〜

また、左側の地点名につきましても、クリックすると地図上に吹き出しが現れ、
さらに吹き出し内のURLをクリックすることによりページにジャンプしますよね。
これですと、該当ページへ移動する手間がかなり増えるため、
目的のページへの誘導率が低くなってしまうような気がします。

そこで、下記のようなことは可能でしょうか？

・地点名にマウスオンすると、地図上の該当地点に吹き出し表示
・地点名からマウスアウトすると吹き出しが消える
・地点名をクリックすると、そのまま該当エントリページにジャンプ

また、最初は地図上にはマーカーは表示されておらず、
地点名にマウスオンするとマーカーが表示されるという形も可能でしょうか？

どんどんCMSD本来の機能とは離れてきたでしょうか…。
可能な範囲でかまいませんの、ご教授よろしくお願いします。

[webmaster]

　bcacsatoさん、いつもお世話になっております。

　ご希望の動作は問題なく可能かと思いますが、JavaScriptに多少慣れている
必要がございます。また、現状のサンプルからの変更となりますと、割と大掛かり
な変更となります。

　まず、マーカー側から説明させて頂きます。

(1-1) マーカーの上にマウスを持ってきた時点で吹き出しを表示。
　現状では、head要素の中のscript要素の中で、吹き出し表示処理（showMaker）
を実行しています。

コード: 全て選択

        // マーカー表示イベントハンドラ
        var showMarker = function(){
        	// マーカーを地図の中央に持ってきて、情報ウィンドウを表示する。
            marker.openInfoWindowHtml( '<div class="marker_data_html"><h2>' + cmsdVars.d( 'title' + mapdata.eid ).innerHTML + '</h2>'
                + '<p>' + cmsdVars.d( 'description' + mapdata.eid ).innerHTML + '</p></div>' );
        };
        
        // clickイベントハンドラを設定
        GEvent.addListener( marker, "click", showMarker );

　ここを、clickイベントではなく、makerのmouseoverイベントでshowMaker
を実行するように修正します。
　これは、

コード: 全て選択

        // clickイベントハンドラを設定
        GEvent.addListener( marker, "click", showMarker );

　を、

コード: 全て選択

        // mouseoverイベントハンドラを設定
        GEvent.addListener( marker, "mouseover", showMarker );

　に変更すればOKです。

(1-2) マーカークリック時にエントリページへジャンプする。
　現状、この処理は存在しませんので、新しく作る必要があります。
　

コード: 全て選択

        // マーカー表示イベントハンドラ
        var showMarker = function(){

　上記のマーカー表示イベントハンドラの定義部分と並列に、エントリページ
表示処理を記述します。エントリページのファイル名を「entrydetail.php」と
仮定します。

コード: 全て選択

        // エントリ詳細ページへジャンプ
        var jumpToEntry = function(){
            window.location = 'entrydetail.php?eid=' + mapdata.eid;
        }

　この処理を、makerのmouseoverイベントに割り当てます。

コード: 全て選択

        // clickイベントハンドラを設定
        GEvent.addListener( marker, "click", jumpToEntry );

(1-3) マーカーからマウスアウトすると、吹き出しが消える。
　同様に、mouseout時のイベントハンドラを作り、それをGEvent.addListner
を使ってmouseoutイベントに割当てます。

コード: 全て選択

        // 吹き出しを消す
        var closeInfoWindow = function(){
            marker.closeInfoWindow();
        }

        // mouseoutイベントハンドラを設定
        GEvent.addListener( marker, "mouseout", closeInfoWindow );

　マーカーについてはこれでOKです。

　次に、左側に並んでいる各リンクに対する処理を記述します。
　現状では、リンクのクリック時に吹き出しを表示しています。
　この部分です。

コード: 全て選択

        // エントリ見出しをクリックした際のイベントハンドラを定義・設定
        cmsdVars.d( "title" + mapdata.eid ).onclick = function(){
        	// zoomを設定
            map.setCenter( new GLatLng( mapdata.lat, mapdata.lng ), mapdata.zoom );
            // マーカー表示
            showMarker();
            return false;
        }

　onclickイベントではjumpToEnterを、onmouseoverにはshowMakerを、
onmouseoutにはcloseInfoWindowを実行します。

(2-1) 見出しの上にマウスカーソルを持ってきた時に吹き出しを表示する。

コード: 全て選択

        // 見出しの上にカーソルを持ってきた時に吹き出し表示
        cmsdVars.d( "title" + mapdata.eid ).onmouseover = function(){
        	// zoomを設定
            map.setCenter( new GLatLng( mapdata.lat, mapdata.lng ), mapdata.zoom );
            // マーカー表示
            showMarker();
            return false;
        }

(2-2) 見出しをクリックした時にエントリ詳細ページへジャンプする。

コード: 全て選択

        // 見出しクリック時にエントリ詳細ページへジャンプ
        cmsdVars.d( "title" + mapdata.eid ).onclick = function(){
            jumpToEntry();
            return false;
        }

(2-3) 見出しからマウスカーソルが外れた時に情報ウィンドウを閉じる。

コード: 全て選択

        // 見出しからマウスカーソルが外れた時に情報ウィンドウを閉じる
        cmsdVars.d( "title" + mapdata.eid ).onmouseout = function(){
            closeInfoWindow();
            return false;
        }

　以上です。
　まとめると、makeMaker関数は次のようになります。
　

コード: 全て選択

    // マーカーを生成して地図に表示する
    function makeMarker( map, mapdata )
    {
        // マーカー生成
        var marker = new GMarker( new GLatLng( mapdata.lat, mapdata.lng ) );
        map.addOverlay( marker );

        // マーカー表示イベントハンドラ
        var showMarker = function(){
        	// マーカーを地図の中央に持ってきて、情報ウィンドウを表示する。
            marker.openInfoWindowHtml( '<div class="marker_data_html"><h2>' + cmsdVars.d( 'title' + mapdata.eid ).innerHTML + '</h2>'
                + '<p>' + cmsdVars.d( 'description' + mapdata.eid ).innerHTML + '</p></div>' );
        };
        
        // mouseoverイベントハンドラを設定
        GEvent.addListener( marker, "mouseover", showMarker );

        // エントリ詳細ページへジャンプ
        var jumpToEntry = function(){
            window.location = 'entrydetail.php?eid=' + mapdata.eid;
        }

        // clickイベントハンドラを設定
        GEvent.addListener( marker, "click", jumpToEntry );

        // 吹き出しを消す
        var closeInfoWindow = function(){
            marker.closeInfoWindow();
        }

        // mouseoutイベントハンドラを設定
        GEvent.addListener( marker, "mouseout", closeInfoWindow );

        // エントリ見出しをクリックした際のイベントハンドラを定義・設定
        cmsdVars.d( "title" + mapdata.eid ).onclick = function(){
        	// zoomを設定
            map.setCenter( new GLatLng( mapdata.lat, mapdata.lng ), mapdata.zoom );
            // マーカー表示
            showMarker();
            return false;
        }

        // 見出しの上にカーソルを持ってきた時に吹き出し表示
        cmsdVars.d( "title" + mapdata.eid ).onmouseover = function(){
        	// zoomを設定
            map.setCenter( new GLatLng( mapdata.lat, mapdata.lng ), mapdata.zoom );
            // マーカー表示
            showMarker();
            return false;
        }

        // 見出しクリック時にエントリ詳細ページへジャンプ
        cmsdVars.d( "title" + mapdata.eid ).onclick = function(){
            jumpToEntry();
            return false;
        }

        // 見出しからマウスカーソルが外れた時に情報ウィンドウを閉じる
        cmsdVars.d( "title" + mapdata.eid ).onmouseout = function(){
            closeInfoWindow();
            return false;
        }
    }

　ちょっと、実際に実行して確認する時間が取れなかったのですが、おおむねこの
ような手順で動くと思います。
　うまく動かなかった場合はご連絡頂ければ幸いです。

[bcacsato]

webmasterさま、ありがとうございます！
明日納品だったため、助かりました〜。
さっそく試してみます！
お忙しいところ、お手数をおかけしました。

[webmaster]

　すいません、あれから結局気になって実際に動かしてみたところ、いくつか
ミスがあった為、元の投稿のソースを修正しています。
　最終ソースは問題なく動きましたので、ご利用下さい。

[bcacsato]

webmasterさま、詳しい解説ありがとうございます！

ご提示いただいたソースを使用したところ、概ね希望通りの動きが実現できましたが、
見出し、マーカーともに、クリックするとNot Foundとなってしまいます。

しかし、URLに間違いはないようで、右クリック→ショートカットのコピーをして
ブラウザに貼り付けると、ちゃんと表示されます。
何が悪いのでしょうか…。もし分かればご教示くださいませ。


Googleマップとの連携機能はとても便利なので、
そのうち、より詳しいサンプルを作成していただけますと嬉しいです。
（たとえは、管理画面から各エントリのマーカー画像を設定する方法など）

それと、↓こちらの件も、ご検討いただけますと幸いです。
http://cms.al-design.jp/phpbb/viewtopic.php?t=1138

よろしくお願いいたしますm(_ _)m

[webmaster]

　bcacsatoさん、申し訳ありません、ちょっと今手元にJavaScriptの仕様書が
ない為、後ほどまた確認させて頂きますが、

コード: 全て選択

        // エントリ詳細ページへジャンプ
        var jumpToEntry = function(){
            window.location.href = 'entrydetail.php?eid=' + mapdata.eid;
        } 

　で置き換えてみて下さい。

　携帯向けGoogle Mapsについても、ちょっと見てみたいと思います。
　いつも情報提供ありがとうございます。m(__)m

[bcacsato]

やはりダメでした〜 同様にNot Foundとなってしまいます。

すいません…お手数おかけします。

[webmaster]

こちらで同じような仕組みを再現してみましたが、問題なく画面遷移します・・。

bcacsatoさんのところで、以下のサンプルをtest1.htmlという名前で保存して
ブラウザで保存し、表示される文字列をクリックして頂いてもよろしいでしょうか。

コード: 全て選択

<html>
<head>
<title>test 1</title>
<script type="text/javascript">
function jumpToLink()
{
	window.location.href = 'http://cms.al-design.jp/newsentry.php?eid=00083';
	return false;
}
</script>
</head>
<body>
<div onclick="jumpToLink()">click to show CMS Designer site.</div>
</body>
</html>

クリック後、http://cms.al-design.jp/newsentry.php?eid=00083 が表示
されるはずなのですが…。

弊社環境では問題なく表示されます。Windows XP SP3のFirefox3、IE6で
確認しています。

[bcacsato]

test1.htmlは問題なく該当ページにジャンプしました。

ということは私の設定ミスなのかもしれません…。

ご提示いただいたソースをそのまま貼り付けましたので、
間違いはないかと思いますが、再度確認のうえ、
いろいろと試してみたいと思います！

[webmaster]

　bcacsatoさん、何度もお手数をおかけしております。

　メールでご連絡頂いた実際のサイトを拝見したところ、

コード: 全て選択

// エントリ詳細ページへジャンプ
var jumpToEntry = function(){
    window.location.href = 'entrydetail.php?eid=' + mapdata.eid;
}

　上記の部分がサンプルそのままになっておりました。

　私の説明不足だったので申し訳ないのですが、上記の「entrydetail.php」
は架空のページ名なので、bcacsatoさんの環境に合わせて詳細表示用ページ名
と差し替えていただく必要がございます。

　何度も申し訳ありませんが、よろしくお願い致します。

[bcacsato]

webmasterさま、すいません！
そうですよね、実際のURLに変更しなければないですよね！
javascriptの中身はノーチェックでした…お恥ずかしいです
おかげさまで、うまくいきました
お忙しいところ、ありがとうございました。