GHWEB06.GRASSHOPPER

BLOG

GoogleMapにルートを表示する

  • Category：Web関連 ／
  • Web関連の備忘録
  • Google Mapsの表示にはAPI登録が必須になりました
    Google Mapsが表示されない場合は、APIキーの登録をお試し下さい。
    APIキーの取得方法につきましては以下サイト様の記事をご確認下さい。
    APIキーの取得 | Google Maps API入門

mapGoogleMapでルート表示をしてみました。会社概要ページで最寄の駅から会社までのルートを乗せたりすると良いかと思います。

スクリプトとサンプル

Google Maps API を読み込む

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

地図を表示するためのスクリプト

function initialize() {
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 13,
center: null,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions);
directionsRenderer.setMap(mapObj);
var request = { 
origin: "高知駅", 
destination: "高松駅",
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) { 
if (status == google.maps.DirectionsStatus.OK) {  
directionsRenderer.setDirections(result);
} 
}); 
}
google.maps.event.addDomListener(window, 'load', initialize);

サンプル

スクリプトの処理内容

function initialize() {
	
/* ルート検索を行う */
var directionsService = new google.maps.DirectionsService();

/* ルート検索の結果を表示するためのオブジェクトを生成 */
var directionsRenderer = new google.maps.DirectionsRenderer(); 

/* 地図のオプションを指定 */
var mapOptions = {
zoom: 13,
center: null,
mapTypeId: google.maps.MapTypeId.ROADMAP
}; 

/* new google.maps.Map()でマップオブジェクトを生成 */
var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 

/* mapObj を DirectionsRendererオブジェクトのsetMap()を使って関連付け */
directionsRenderer.setMap(mapObj);

/* 開始地点と目的地点、ルーティングの種類を設定  */
var request = { 
origin: "高知駅", 
destination: "高松駅",
travelMode: google.maps.TravelMode.DRIVING
}; 
 
directionsService.route(request, function(result, status) { 

/* ルート検索に成功したら以下の処理 */
if (status == google.maps.DirectionsStatus.OK) { 

/* ルートをマップ上に表示 */  
directionsRenderer.setDirections(result);
} 
}); 
}
/* ページ読込時に地図を表示 */
google.maps.event.addDomListener(window, 'load', initialize);

補足

座標で開始地点と目的地点を指定する場合

/* 開始地点の座標を指定*/
var start = new google.maps.LatLng(33.566152,133.543608); 

/* 目的地点の座標を指定*/
var goal = new google.maps.LatLng(34.351754,134.047069); 

/* origin と destination に変数を指定 */
var request = { 
origin:start,
destination: goal,
travelMode: google.maps.TravelMode.DRIVING
};

高速道路を使わない場合

開始地点と目的地点の指定をしている箇所に avoidHighways:true を追加します。

var request = { 
origin: "高知駅", 
destination: "高松駅", 
travelMode: google.maps.TravelMode.DRIVING
avoidHighways:true
};

サンプル

経由地点を増やす場合

開始地点と目的地点の指定をしている箇所に経由地点 waypoints:[{…}] を追加します。

var request = { 
origin: "高知駅", 
destination: "高松駅",
waypoints:[{location: "徳島空港"}],
travelMode: google.maps.TravelMode.DRIVING
};

サンプル

経由地点のマーカー表記をしたくない場合

経由地点 waypoints:[{…}] の指定に stopover:false を追加します。

var request = { 
origin: "高知駅", 
destination: "高松駅",
waypoints:[{location: "徳島空港",stopover:false}],
travelMode: google.maps.TravelMode.DRIVING
};
RELATED ARTICLE
  • 掲載: