TOP > おもちゃ箱 > 路線図表示 APIサンプル GoogleMapsバージョン

メニュー

■ ツール
駅からの距離（座標）
駅からの距離（住所）
地域情報(ベータ)
駅名検索
座標変換
■ API / XML / JSON
都道府県の路線一覧
路線の駅一覧
駅詳細
駅グループコード
駅占い
座標から最寄駅
座標から珈琲店(ベータ)
駅名検索
隣接駅一覧
■ APIサンプル
都道府県から沿線/駅表示
選択した沿線/駅一覧表示
選択した駅周辺の地図
┣GoogleMaps
┗Yahoo!地図
路線図表示
絞込検索システムASP「ピタリスト」


路線図表示 APIサンプル GoogleMapsバージョン

選択した駅周辺の地図を表示します。

このサンプルはGoogleMapsサービスを利用しています。
このサービスを利用するには、Googleサイトにて、 Googlekeyを発行する必要があります。

※表示するOSやブラウザの環境などにより正常に動作しない場合があります。

ご利用の当たっては、下記利用条件に同意したものとします。


サンプル

路線を選択して「表示」をクリックしてください。

ここに地図を表示します


サンプル ソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>路線図表示サンプル GoogleMapsバージョン</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=(ここにGoogleKeyを入力)" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript"><!--

function load(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.enableDoubleClickZoom();

//マーカー定義
icon = new Object();
icon = new GIcon();
icon.image = 'http://www.google.com/mapfiles/marker.png';
icon.iconSize = new GSize(20, 34);
icon.iconAnchor = new GPoint(9, 34);
icon.infoWindowAnchor = new GPoint(9,2);
//マーカー定義

var point = new GLatLng(35.658632,139.745411);
map.setCenter(point, 15);

marker = new GMarker(point, icon);
map.addOverlay(marker);

}
}

function setMenuItem(type,code){

var s = document.getElementsByTagName("head")[0].appendChild(document.createElement("script"));
s.type = "text/javascript";
s.charset = "utf-8";

var optionIndex0 = document.form.s0.options.length; //沿線のOPTION数取得
if (type == 0){
for ( i=0 ; i <= optionIndex0 ; i++ ){document.form.s0.options[0]=null} //沿線削除
if (code == 0){
document.form.s0.options[0] = new Option("----",0); //沿線OPTIONを空にする
}else{
s.src = "http://www.ekidata.jp/api/p/" + code + ".json"; //沿線JSONデータURL
}
}
}

//表示ボタンが押されたときの処理
function OnClickStation(){

var IntStationCd = document.form.s0.options[document.form.s0.selectedIndex].value;
ArSelect = IntStationCd.split(",");

if (ArSelect[0] == 0){
//値が無ければ何もしない
} else{
document.getElementById("map").innerHTML = "now loading...";
//隣り合う駅データ取得
var s = document.getElementsByTagName("head")[0].appendChild(document.createElement("script"));
s.type = "text/javascript";
s.charset = "utf-8";
s.src = "http://www.ekidata.jp/api/n/" + ArSelect[0] + ".json";
}
}

var xml = {};
xml.onload = function(data){

var line = data["line"];
var station_join = data["station_join"];

if(line != null){
document.form.s0.options[0] = new Option("----",0); //OPTION1番目はNull
for( i=0; i<line.length; i++){
ii = i + 1 //OPTIONは2番目から表示
var op_line_name = line[i].line_name;
var op_line_cd = line[i].line_cd;
document.form.s0.options[ii] = new Option(op_line_name,op_line_cd);
}
}

if(station_join != null){
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(station_join[0].lon1,station_join[0].lat1), 4);
var points = null;
var marker = null;
for( i=0; i<station_join.length; i++){
points = [{"x":station_join[i].lon1,"y":station_join[i].lat1},{"x":station_join[i].lon2,"y":station_join[i].lat2}];
map.addOverlay(new GPolyline(points));
}
}
}
}

// --></script>


</head>
<body onload="load()">

選択した駅周辺の地図<br>

<form name="form">
<select name="pref" onChange="setMenuItem(0,this[this.selectedIndex].value)">
<option value="0" selected>-----
<option value="1">北海道
<option value="2">青森県
<option value="3">岩手県
<option value="4">宮城県
<option value="5">秋田県
<option value="6">山形県
<option value="7">福島県
<option value="8">茨城県
<option value="9">栃木県
<option value="10">群馬県
<option value="11">埼玉県
<option value="12">千葉県
<option value="13">東京都
<option value="14">神奈川県
<option value="15">新潟県
<option value="16">富山県
<option value="17">石川県
<option value="18">福井県
<option value="19">山梨県
<option value="20">長野県
<option value="21">岐阜県
<option value="22">静岡県
<option value="23">愛知県
<option value="24">三重県
<option value="25">滋賀県
<option value="26">京都府
<option value="27">大阪府
<option value="28">兵庫県
<option value="29">奈良県
<option value="30">和歌山県
<option value="31">鳥取県
<option value="32">島根県
<option value="33">岡山県
<option value="34">広島県
<option value="35">山口県
<option value="36">徳島県
<option value="37">香川県
<option value="38">愛媛県
<option value="39">高知県
<option value="40">福岡県
<option value="41">佐賀県
<option value="42">長崎県
<option value="43">熊本県
<option value="44">大分県
<option value="45">宮崎県
<option value="46">鹿児島県
<option value="47">沖縄県
</select>
<select name="s0" onChange="setMenuItem(1,this[this.selectedIndex].value)">
<option selected>----
</select>
<input type="button" value="　表示　" onClick="OnClickStation()">
</form>
</p>

<div id="map" style="width: 620px; height: 400px">ここに地図を表示します</div>
<div id="stm"></div>

</body>
</html>

サンプルソースのダウンロード　→ダウンロード


Google key取得方法

１．以下のサイトにアクセスします
http://code.google.com/apis/maps/signup.html

２．利用規定を読み、同意の場合は、GoogleMapsを表示するサイトURLを入力します


３．Google keyが発行されます



スクリプト利用条件

・著作権表示義務はありません。
・商用利用可能です。
・自由に改造していただいてかまいません。
・ご利用に関して弊社に連絡は不要です。
・ご利用することにより生じたいかなる損害についても弊社は責任を負いません。


データ利用条件

■ 利用の制限

商用、非商用にかかわらず、どなたでもご利用いただくことができますが、弊社サーバへのアクセスが1日に3万アクセスを超えるご利用の場合は、あらかじめ弊社にご連絡ください。
また、短時間に大量のアクセスを行わないようにしてください。

■ 提供の変更及び終了

データ提供サービスについては予告なく変更・サービスを終了する場合があります、ご了承下さい。

■ 免責事項

データ提供サービスをご利用することにより生じたいかなる損害についても弊社は責任を負いません。

■ 禁止事項

データ提供サービスの以下の利用を禁じます。

　(1) 犯罪を勧誘又は助長するおそれのある利用
　(2) わいせつ、裸体、死体、その他公序良俗に反する情報に関係する利用
　(3) 消費者の判断に錯誤を与える恐れのある利用
　(4) 第三者の財産権(知的所有権を含む)の侵害、プライバシーの侵害、誹謗中傷その他の不利益を与える利用
　(5) 弊社または本件サービスへの誹謗中傷、弊社業務の運営・維持を妨げる利用
　(6) ウイルスその他第三者に害悪を加えるおそれのある利用