雑草魂 :: Monthly Archives: 2010年04月

入力欄とかいらずに住所の一覧データをそれぞれ地図表示したい時にはこんなのはいかがでしょう。

※Googlemapを使うには固有のAPIキーが必要です。

<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=[APIキーを入れてください]" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    var map = null;
    var map_old = 0;
    var geocoder = null;
    // 初期化
    // <body onload="load()"> で呼び出されています
    function load() {
        if (GBrowserIsCompatible()) {
            // GClientGeocoderを初期化
            geocoder = new GClientGeocoder();
        }
    }

    // 「MAP」ボタンを押すと地図を表示
    function showAddress(address,id) {
        if(id != map_old){
        if (geocoder) {
            if(map_old > 0){
                document.getElementById("map"+map_old).style.display="none";
            }
            document.getElementById("map"+id).style.display="block";
            geocoder.getLatLng(
                address,
                function(point) {
                    if (!point) {
                        alert(address + " not found");
                    } else {
                        map = new GMap2(document.getElementById("map"+id));
                        map.setCenter(point, 13);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        map.addControl(new GSmallMapControl());
                        map.addControl(new GOverviewMapControl());
                        marker.openInfoWindowHtml(address);
                        //マップにクリックイベント追加
                        GEvent.addListener(map, "click", function(overlay, point) {
                            if (overlay) {
                                //周辺地図を表示
                                overlay.showMapBlowup(15);
                            } else if (point) {
                                map.showMapBlowup(point,15,G_SATELLITE_TYPE);
                            }
                        });
                    }
                }
            );
        }
        map_old = id;
        }else{
//表示中の地図を非表示にする           document.getElementById("map"+map_old).style.display="none";
            map_old = 0;
        }
    }
//]]>
</script>
</head>




<form action="javascript:void(0);" method="post" onsubmit="showAddress(this.address.value,this.id.value); return false">
    <input type="hidden" name="address" value="東京都新宿区西新宿2-8-1" />
    <input type="hidden" name="id" value="1" />
<input type="submit" value="MAP" /><br />
</form>

<form action="javascript:void(0);" method="post" onsubmit="showAddress(this.address.value,this.id.value); return false">
    <input type="hidden" name="address" value="東京都港区高輪3" />
    <input type="hidden" name="id" value="2" />
<input type="submit" value="MAP" /><br />
</form>


<div id="map1" style="width:300px; height:300px; display:none; color:#000000; margin:10px 0 0 10px; float:right;"></div>

<div id="map2" style="width:300px; height:300px; display:none; color:#000000; margin:10px 0 0 10px; float:right;"></div>

雑草魂

Googlemap：javascriptによる住所データ一覧の各地図表示

CakePHP、ラジオボタンの作り方

zasso77