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">
//<![CDATA[
var map,marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* ピクセル座標 */
        var st_1=new GLatLng(35.691034,139.70026); /* 新宿駅 */
        var st_2=new GLatLng(35.683061,139.702041); /* 代々木駅 */
        var st_3=new GLatLng(35.670284,139.702685); /* 原宿駅 */
        var st_4=new GLatLng(35.658517,139.701333); /* 渋谷駅 */
        var st_5=new GLatLng(35.6468,139.710109); /* 恵比寿駅 */
        var st_6=new GLatLng(35.634,139.715828); /* 目黒駅 */
        var st_7=new GLatLng(35.626444,139.723445); /* 五反田駅 */
        var st_8=new GLatLng(35.619698,139.728552); /* 大崎駅 */
        var st_9=new GLatLng(35.630154,139.74044); /* 品川駅 */
        var st_10=new GLatLng(35.645736,139.747574); /* 田町駅 */
        var st_11=new GLatLng(35.655649,139.756747); /* 浜松町駅 */
        var st_12=new GLatLng(35.666599,139.758126); /* 新橋駅 */
        var st_13=new GLatLng(35.675069,139.763324); /* 有楽町駅 */
        var st_14=new GLatLng(35.6811,139.767079); /* 東京駅 */
        var st_15=new GLatLng(35.691688,139.770888); /* 神田駅 */
        var st_16=new GLatLng(35.698684,139.774214); /* 秋葉原駅 */
        var st_17=new GLatLng(35.70744,139.774632); /* 御徒町駅 */
        var st_18=new GLatLng(35.713765,139.77725); /* 上野駅 */
        var st_19=new GLatLng(35.720498,139.778838); /* 鶯谷駅 */
        var st_20=new GLatLng(35.727771,139.770985); /* 日暮里駅 */
        var st_21=new GLatLng(35.732135,139.76679); /* 西日暮里駅 */
        var st_22=new GLatLng(35.738109,139.760717); /* 田端駅 */
        var st_23=new GLatLng(35.736489,139.746877); /* 駒込駅 */
        var st_24=new GLatLng(35.733493,139.739345); /* 巣鴨駅 */
        var st_25=new GLatLng(35.731403,139.728659); /* 大塚駅 */
        var st_26=new GLatLng(35.72893,139.710377); /* 池袋駅 */
        var st_27=new GLatLng(35.721204,139.70659); /* 目白駅 */
        var st_28=new GLatLng(35.712284,139.703785); /* 高田馬場駅 */
        var st_29=new GLatLng(35.701307,139.700046); /* 新大久保駅 */

        
        var latlngs=[st_1,st_2, st_3, st_4, st_5, st_6, st_7, st_8, st_9, st_10, st_11, st_12, st_13, st_14, st_15, st_16, st_17, st_18, st_19, st_20, st_21, st_22, st_23, st_24, st_25, st_26, st_27, st_28, st_29];
        var polyline=new GPolyline(latlngs,  "#ff0000",  3, 0.9);
        map.addOverlay(polyline);
        /* 中心地点 */
        map.setCenter(new GLatLng(35.684002,139.737618), 12);

        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */

        /* マーカー追加 */
        map.addOverlay(new GMarker(st_1));
        map.addOverlay(new GMarker(st_2));
        map.addOverlay(new GMarker(st_3));
        map.addOverlay(new GMarker(st_4));
        map.addOverlay(new GMarker(st_5));
        map.addOverlay(new GMarker(st_6));
        map.addOverlay(new GMarker(st_7));
        map.addOverlay(new GMarker(st_8));
        map.addOverlay(new GMarker(st_9));
        map.addOverlay(new GMarker(st_10));
        map.addOverlay(new GMarker(st_11));
        map.addOverlay(new GMarker(st_12));
        map.addOverlay(new GMarker(st_13));
        map.addOverlay(new GMarker(st_14));
        map.addOverlay(new GMarker(st_15));
        map.addOverlay(new GMarker(st_16));
        map.addOverlay(new GMarker(st_17));
        map.addOverlay(new GMarker(st_18));
        map.addOverlay(new GMarker(st_19));
        map.addOverlay(new GMarker(st_20));
        map.addOverlay(new GMarker(st_21));
        map.addOverlay(new GMarker(st_22));
        map.addOverlay(new GMarker(st_23));
        map.addOverlay(new GMarker(st_24));
        map.addOverlay(new GMarker(st_25));
        map.addOverlay(new GMarker(st_26));
        map.addOverlay(new GMarker(st_27));
        map.addOverlay(new GMarker(st_28));
        map.addOverlay(new GMarker(st_29));
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<p><strong>【山手線一周】</strong></p>
<div id="map" style="width:600px;height:600px"><!-- 地図描画領域 --></div>

polarized women