Nucleusでサイト構築 25.GoogleMaps Part4

今回はいよいよGoogleMaps関連の最終回としてこれまでのソース修正箇所を載せる。
修正するファイルはプラグインNP_GooleMapsのソース NP_GoogleMaps.php の1本なんだけど…

先ずは、２つ以上のマーカー表示を行う際、マーカーに連番(A, B, C, …)を振るヤツ。
これは、主に「農場主の日常」さんを参考にした。以下２箇所の修正でマップ上のマーカーが連番となる。

「function DrawMap」で検索
    function DrawMap($mapdata, $i = '') {
        $script = "    var map$i = new GMap(document.getElementById(\"map$i\"));\n";
//20081001 add >>>>
        $script .= " var baseIcon$i = new GIcon();\n";
        $script .= " baseIcon$i.shadow = \"http://www.google.com/mapfiles/shadow50.png\";\n";
        $script .= " baseIcon$i.image = \"http://www.google.com/mapfiles/marker.png\";\n";
        $script .= " baseIcon$i.iconSize = new GSize(20, 34);\n";
        $script .= " baseIcon$i.shadowSize = new GSize(37, 34);\n";
        $script .= " baseIcon$i.iconAnchor = new GPoint(9, 34);\n";
        $script .= " baseIcon$i.infoWindowAnchor = new GPoint(9, 2);\n";
        $script .= " baseIcon$i.infoShadowAnchor = new GPoint(18, 25);\n";
//20081001 add <<<<
        $script .= "    map$i.drawpolyline = false;\n";

「$mapdata["mark$k"]」で検索
            if ($mapdata["mark$k"] == "yes") {
//20081001 add >>>>
                $script .= " var icon$j = new GIcon(baseIcon$i);\n";
                if (($max > 1)&&($max <= 25)) {
                    $letter = chr(65 + $j);
                    $script .= " icon$j.image = \"http://www.google.com/mapfiles/marker$letter.png\";\n";
                }
//20081001 add <<<<
//20081001 chg >>>>
//              $script .= "    marker[$j] = new GMarker(wpoint);\n"
                $script .= "    marker[$j] = new GMarker(wpoint,icon$j);\n"
//20081001 chg <<<<
                        .  "    map$i.addOverlay(marker[$j]);\n";

次は、<%gmap(link()･･･)%>で作成されるリンク(アンカー)にGoogleのマーカーを表示させて、リンククリック時の挙動のための修正

「function replaceCallbackLink」で検索
    function replaceCallbackLink($matches) {
        $mapnum = $this->mapnumber-1;
        if ($this->isinline) {
            $s = "<a href=\"javascript:void(0)\" onclick=\"map$mapnum.gotopoint({$matches[1]});return false;\" class=\"maplink\">{$matches[2]}</a>";
        } else {
//20081001 add >>>> ここで、リンク文字列後ろにつけるマーカーのイメージタグを生成する、イメージを付加しない場合は無視してイイ
            $max = $this->items;
            if (($max > 1)&&($max <= 25)) {
                $letter = chr(65 + $matches[1]);
                $s_img = "<img src=\"//www.google.com/mapfiles/marker$letter.png\" width=\"20\" height=\"34\" alt=\"{$matches[2]}\" title=\"{$matches[2]}\" style=\"border:none;\" />";
            } else {
                $s_img = "<img src=\"//www.google.com/mapfiles/marker.png\" width=\"20\" height=\"34\" alt=\"{$matches[2]}\" title=\"{$matches[2]}\" style=\"border:none;\" />";
            }
//20081001 add <<<<
//20080929 chg >>>>リンクをクリックしたとき、地図ウィンドウを開く(開いた地図windowはグローバル変数に格納)＆対応するマーカーに地図移動させる
//            $s = "<a href=\"javascript:void(0)\" onclick=\"if(window[map$mapnum]==null||map$mapnum.closed)var map$mapnum=openmap$mapnum($matches[1]);return false;\" class=\"maplink\">{$matches[2]}</a>";
            $s = "<a href=\"javascript:void(0)\" onclick=\"if((map$mapnum==null)||map$mapnum.closed){map$mapnum=openmap$mapnum($matches[1]);}map$mapnum.mapgotopoint($matches[1]);return false;\" class=\"maplink\">{$matches[2]}{$s_img}</a>";
//20080929 chg <<<<
        }
        return $s;
    }

次は、地図ウィンドウを開いて、それを返すJavascriptの修正

「function openmap$i(p)」で検索
        function openmap$i(p) {
//20080929 chg >>>>　紛らわしいのでいちいち変数に格納せず、開いたwindowをマンマ返す
//          var map=window.open('{$CONF['ActionURL']}?action=plugin&name=GoogleMaps$s&info='+p, 'googlemap', 'scrollbars=no,width=$w2,height=$h2,left=10,top=10,status=yes,resizable=yes,location=no');
//          return map;
            return window.open('{$CONF['ActionURL']}?action=plugin&name=GoogleMaps$s&info='+p, 'googlemap', 'scrollbars=no,width=$w2,height=$h2,left=10,top=10,status=yes,resizable=yes,location=no');
//20080929 chg <<<<
        }
//20080929 add >>>>　開いたwindowを格納するグローバル変数の定義
        var map$i=null;
//20080929 add <<<<


次は、地図上のマーカーがクリックされたときの吹き出しを表示するjavascriptの修正

「function mapgotopoint(p)」で検索
    function mapgotopoint(p) {
        this.focus();
//20080929 chg >>>>↓これが効かない
//      map.recenterOrPanToLatLng(marker[p].point);
        map.recenterOrPanToLatLng(marker[p].getPoint());  //なぜかGoogleMapsAPI V2にするとOKだった
//20080929 chg <<<<
        marker[p].openInfoWindowHtml(info[p]);
    }

次は、恐らくGoogleMapsのmapオブジェクトに存在しないプロパティを設定していることでエラー停止してしまう？ので不要なコードのコメント化

「map$i.minpoint」で検索
        if (!$max) {
            $script .= "    map$i.centerAndZoom(new GPoint(0, 0)," . $mapdata['zl'] . ");\n";
        }
//20080929　del >>>> MAPオブジェクトに存在しなそうなプロパティなのでコメント(影響しないと思われ)
//        $script .= "    map$i.minpoint = $minpoint;\n";
//        $script .= "    map$i.maxpoint = $j;\n";
//20080928 del <<<<
//20080924 add >>>> ズーム値が無視されないように対応
        if($mapdata['zl']>=0 and $mapdata['zl']<=19) {
            $script .= "    map$i.setZoom(".$mapdata['zl'].");\n";
        }
//20080924 add <<<<
        if ($autozoom) {


次は、マップを開くとき、吹き出しを表示させるロジック何だけど、同じロジックを避けるため関数を呼ぶように修正

「$p = $mapdata['info'];」で検索
        if (!($mapdata['info'] === '') && !($mapdata['info'] === null)) {
            $p = $mapdata['info'];
//20080929 chg >>>> せっかく定義してあるので、関数をコールする
//          $script .= "    map$i.recenterOrPanToLatLng(marker[$p].point);\n";
//          $script .= "    marker[$p].openInfoWindowHtml(info[$p]);\n";
            $script .= "    mapgotopoint($p);\n";
//20080929 chg <<<<
        }

以上だ。順序バラバラ。　そんな奇特な人は居ないと思うが、希望であれば、ソース提供しますよ。
毎回言ってるけど、不具合でても知りません、自己責任でお願いする。

どう表示されるかは、前回の記事「Nucleusでサイト構築 24.GoogleMaps Part3」を参考に。

今までのNucleusのNP_GoogleMapsに関する記事
Nucleusでサイト構築 08.GoogleMaps
Nucleus NP_GoogleMaps用ツールの改良
Nucleusでサイト構築 23.GoogleMaps Part2
Nucleusでサイト構築 24.GoogleMaps Part3