メニュー

E-Mail
ASP.Netのお勉強
VB.Netのお勉強
Excel マクロ・VBAのお勉強
PHPのお勉強
Webデザインのお勉強
Javaのお勉強
総合サイトCocoaLiz
ネイルサロン検索
エステサロン検索
アロマサロン検索
アイビューティーサロン検索

Google ルート検索

GoogleMapでルート検索ができます。


サンプルでは、東京駅から上野駅までの
徒歩でのルートを表示します。


徒歩モード travelMode: G_TRAVEL_MODE_WALKING
運転モード travelMode: G_TRAVEL_MODE_DRIVING


作ったサンプルサイトは、こちらです。

コードは、下記。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP" xml:lang="ja-JP">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Google MAP ルート検索</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=@@@@"></script>
<script type="text/javascript">

//<![CDATA[


function load() {

    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.681379,139.765577), 13);

        var directions = new GDirections(map, document.getElementById('route'));
        directions.load('from: 東京駅 to: 上野駅', {locale: 'ja_JP',travelMode: G_TRAVEL_MODE_WALKING});
    }

}

//]]>
</script>
</head>
<body onload="load();" onunload="GUnload();">

    <div id="map" style="float:left;width: 500px; height: 400px"></div>
    <div id="route" style="overflow: scroll; width: 300px;height: 400px;"></div>

</body>
</html>



Copyright (C) 総合サイトCocoaLiz. All Rights Reserved.