PHP & JavaScript Room :: 設置サンプル

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![[
var map;
var geocoder;

function load(){
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.665246,139.712319), 13);
        geocoder=new GClientGeocoder();
    }
}
function addAddressToMap(response){
    /* マーカー削除 */
    map.clearOverlays();
    if(!response || response.Status.code!=200){
        alert("住所の場所を特定できませんでした。");
    }else{
        place=response.Placemark[0];
        point=new GLatLng(place.Point.coordinates[1],
        place.Point.coordinates[0]);
        /* マーカー追加 */
        marker=new GMarker(point);
        map.addOverlay(marker);
        /* マーカー上に情報ウィンドウ表示 */
        marker.openInfoWindowHtml("<textarea cols='30' rows='3'>"+place.address+"\n国コード："+place.AddressDetails.Country.CountryNameCode+"</textarea>");
    }
}
/* 入力した住所の位置にマーカーを追加 */
function showLocation(){
    var address=document.forms[0].q.value;
    /* 入力した住所をジオコード化するためにGoogleサーバーにリクエスト送信 */
    geocoder.getLocations(address, addAddressToMap);
}
/* 検索したアドレスを入力フォームに表示 */
function findLocation(address){
    document.forms[0].q.value=address;
    showLocation();
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div style="float:left; width:425px;">
    <div id="map" style="width:425px;height:340px;"><!-- 地図描画領域 --></div><br>
</div>
<div style="float:left; width:330px; margin-left:20px;">
    <form action="#" onsubmit="showLocation(); return false;">
        <fieldset>
            <legend>住所検索</legend>
            <p>
                <input type="text" name="q" value="" class="address_input" size="30" />
                <input type="submit" name="find" value="検索" />
            </p>
            <ul>
                <li><a href="javascript:findLocation('The Peninsula New York');">The Peninsula New York</a></li>
                <li><a href="javascript:findLocation('700 Fifth Avenue at 55th Street, New York, NY 10019, USA');">700 Fifth Avenue at 55th Street, New York, NY 10019, USA</a></li>
            </ul>
            <ul>
                <li><a href="javascript:findLocation('ディズニーランド');">ディズニーランド</a></li>
                <li><a href="javascript:findLocation('千葉県浦安市舞浜2-11');">千葉県浦安市舞浜2-11</a></li>
                <li><a href="javascript:findLocation('千葉県浦安市舞浜　２－１１');">千葉県浦安市舞浜　２－１１</a></li>
                <li><a href="javascript:findLocation('千葉県浦安市舞浜二丁目十一番地');">千葉県浦安市舞浜二丁目十一番地</a></li>
            </ul>
            <ul>
                <li><a href="javascript:findLocation('ベルサイユ宮殿');">ベルサイユ宮殿</a></li>
                <li><a href="javascript:findLocation('ヴェルサイユ宮殿');">ヴェルサイユ宮殿</a></li>
                <li><a href="javascript:findLocation('Ch&acirc;teau de Versailles');">Ch&acirc;teau de Versailles</a></li>
            </ul>
        </fieldset>
    </form>
</div>
<br style="clear:both;" />