■この部分にデフォルトのセンター位置やMapのタイプを記述
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: starts
}
■myoptionを渡します
map = new google.maps.Map(document.getElementById("HTMLに表示するタグ"), myOptions);
■線を引きたい点と点を記述
var flightPlanCoordinates = [
new google.maps.LatLng(36.63615817578634,137.18512058258057), //富山空港周辺
new google.maps.LatLng(36.64442262062068,137.18276023864746)];
■new google.maps.Polylineのpathに上記のflightPlanCoordinatesを渡す
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
fillColor: '#ff0000'})
■ 線を描くMapを渡す
flightPath.setMap(map);
■ランドマークを記述
var stations = [
['富山総合公園', 36.638833,137.1981248],
['富山郵便局', 36.669182,137.234817],
■ランドマークをjQuery.eachでループ
jQuery.each(stations, function()
{
var latlng = new google.maps.LatLng(this[1], this[2]);
■経由地を代入
routes1 = document.getElementById("route1").value;//経由地1
routes2 = document.getElementById("route2").value;//経由地2
routes3 = document.getElementById("route3").value;//経由地3
■上記の経由地をwaypointに渡す
waypoints: [
{
location:routes1, //経由地変数1
stopover:false
},{
location:routes2,//経由地変数2
stopover:false
},{
location:routes3,
stopover:false
}],
■上記の経由地等をdirectionsService.routeに渡す
directionsService.route(request, function(result, status)
{
SetPolyline(result.routes[0].overview_path);
■ここでスタート地から経由地・ゴールまでの線を引きます
function SetPolyline(routePath)
0 件のコメント:
コメントを投稿