マルシェル新規登録で5000円分当たる

Google Maps JavaScript API v3 でルート検索で表示されるポリラインの色や太さを変更したいのですが行き詰ってます。

ネットで調べてますと、polylineOptionのstrokeColorやstrokeWeightなどで変更できるような事は書いてあるのですが、どうやってもうまくいきません。


Googleデベロッパーで紹介されています下記のルートサービスのひな形をもとにいろいろやっているのですが、どこにどのように記述すればいいのでしょうか。

------------------------------------------------
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
}

function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
--------------------------------------------------

このQ&Aに関連する最新のQ&A

A 回答 (1件)

DirectionsRendererのoption設定で、色や太さを設定できます。




>ネットで調べてますと
map apiに関しては本家のgoogleから詳細なドキュメントが公開されていますので、そちらを調べるのが一番です。
(この回答もそこを見ただけです。)
https://developers.google.com/maps/documentation …


具体的には、初期設定で、
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setOptions({
 polylineOptions: { strokeColor:"#f00", strokeWeight:6 }
});
とか。


以前、似たようなルート検索の質問がありましたので、ご参考までに。
 http://oshiete.goo.ne.jp/qa/8159078.html
    • good
    • 0
この回答へのお礼

ありがとうございます。

実は、教えて頂いた設定もためしてみたのですが、ぜんぜんダメだったのです。
ダメと言いますか設定する位置に問題があるのだと思います。

もう少しいろいろと探ってみて、原因が絞れてきましたら改めて質問させていただきます。

お礼日時:2014/05/30 19:50

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qgoogle maps api v3のルート検索

google maps api v3のルート検索でA,Bマーカーでなく、
オリジナルのマーカーにてドラッグ&ドロップマウスで移動可能なルート検索を
javascriptで作るやり方が知りたいです。

Aベストアンサー

ちょっと面白そうだったので、かなりいい加減ですが作ってみました。
とは言っても、ほとんど A No2様の回答そのままなので、説明は省略です。

独自マーカーは回答欄のコードだと表示しにくいので、googleさんのchart iconを利用して、これまたテキトーです。
参考にもならないかも知れませんが…
(マーカーのアニメーションが無い方が良さそうですが、draggableにすると、なってしまうみたい)

(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
</head>
<body>

<div id='map' style='width:800px; height:600px;'></div>

<script type="text/javascript">
(function(){

//地図表示
var mapDisp = function(lat, lng, id){
 return new google.maps.Map(document.getElementById(id), {
  zoom: 13,
  center: new google.maps.LatLng(lat, lng),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scaleControl: true,
  scrollwheel: false
 });
}

//マーカー作成(仮マーカー)
var createMarker = function(lat, lng, mark){
 var icon = {
  anchor: {x:0, y:37},
  url: "http://chart.apis.google.com/chart?chst=d_bubble_icon_text_small_withshadow&chld=glyphish_walk|bb|" + mark + "|000000"
 }
 var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  map: map,
  draggable: true,
  icon: icon
 });
 google.maps.event.addDomListener(marker, 'dragend', route);
 return marker;
}

//経路検索
var route = function(){
 var request = {
  origin: start.getPosition(),
  destination: goal.getPosition(),
  travelMode: google.maps.DirectionsTravelMode.DRIVING
 };
 directS.route(request, function(response, status){
  if (status == google.maps.DirectionsStatus.OK){
   directDisp.setDirections( response );
  }
 });
}


var map = mapDisp(35.68, 139.75, "map");
var directS = new google.maps.DirectionsService();
var directDisp = new google.maps.DirectionsRenderer();
directDisp.setMap(map);
directDisp.setOptions({markerOptions: { visible:false }});

var start = createMarker(35.71, 139.76, "%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88|00CCFF");
var goal = createMarker(35.65, 139.76, "%E3%82%B4%E3%83%BC%E3%83%AB|88FF00");

})();
</script>
</body>
</html>

ちょっと面白そうだったので、かなりいい加減ですが作ってみました。
とは言っても、ほとんど A No2様の回答そのままなので、説明は省略です。

独自マーカーは回答欄のコードだと表示しにくいので、googleさんのchart iconを利用して、これまたテキトーです。
参考にもならないかも知れませんが…
(マーカーのアニメーションが無い方が良さそうですが、draggableにすると、なってしまうみたい)

(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sampl...続きを読む

Qたくさんの経由地がある巡回ルートの描画

東北道の駅144か所の巡回ルートを設計し、巡回する道の駅の順番もすべて決まっているのですが、
この巡回ルートをgoogle map上に描画したいと思っています。

google mapのAPIだと経由地は8か所までのようなのですが、8か所ずつに分割して全部を同時描画ならできるのだろうと思います。

経由地の住所または緯度、経度を全部入力すれば一気に描画してくれるサイトあるいは、
excel VBAコードやgoogleスプレッドシートのソースコードをご紹介いただけませんでしょうか。

Aベストアンサー

ANo4です。

ちょっとだけ時間ができたので、簡単なものを作成してみましたが、10ルート以上が表示されませんね。
調べたところ、Direktionサービスの制限(10回/秒まで)に引っかかるようです。
https://developers.google.com/maps/documentation/directions/usage-limits

これを避けるには0.1秒ごとにリクエストするなどとしなければなりませんが、100ポイントでも10秒以上かかってしまうので、ウェイポイントも併用したほうが速くできそうです。

・・・ということで、作り直しました。
時間が無くなってきたので、少々いい加減ですが・・・(汗)
「0.1秒ごとのアクセス」と「ウェイポイントの利用」で若干複雑にはなっていますが、雰囲気のご参考までに。

※ 最短距離を求めるものではありませんので、データの順に経路を表示するだけです
※ インデントは全角空白にしてあります。
※ ポイントマーカをクリックすると名称と座標値が表示されます。
(function(){
//座標データ(東海道53次)
// [ 名称, 緯度, 経度, (LatLng, Marker)]
var points = [
[ '日本橋', 35.683611, 139.774444 ],
[ '品川宿', 35.621944, 139.739167 ],
[ '川崎宿', 35.535556, 139.707778 ],
[ '神奈川宿', 35.472778, 139.632278 ],
[ '程ヶ谷宿', 35.444028, 139.595556 ],
[ '戸塚宿', 35.395028, 139.529861 ],
[ '藤沢宿', 35.345667, 139.486306 ],
[ '平塚宿', 35.327278, 139.337806 ],
[ '大磯宿', 35.309, 139.315306 ],
[ '小田原宿', 35.248722, 139.161028 ],
[ '箱根宿', 35.190417, 139.026361 ],
[ '三島宿', 35.11925, 138.914472 ],
[ '沼津宿', 35.100111, 138.857417 ],
[ '原宿', 35.125528, 138.797333 ],
[ '吉原宿', 35.162778, 138.685639 ],
[ '蒲原宿', 35.119972, 138.605472 ],
[ '由比宿', 35.107611, 138.567472 ],
[ '興津宿', 35.049833, 138.519556 ],
[ '江尻宿', 35.019889, 138.480861 ],
[ '府中宿', 34.974917, 138.387639 ],
[ '鞠子宿', 34.949417, 138.342444 ],
[ '岡部宿', 34.918833, 138.282667 ],
[ '藤枝宿', 34.869806, 138.252722 ],
[ '島田宿', 34.832806, 138.175861 ],
[ '金谷宿', 34.822861, 138.129278 ],
[ '日坂宿', 34.804139, 138.075361 ],
[ '掛川宿', 34.772917, 138.015889 ],
[ '袋井宿', 34.747472, 137.923222 ],
[ '見付宿', 34.726806, 137.857028 ],
[ '浜松宿', 34.705111, 137.731917 ],
[ '舞坂宿', 34.684389, 137.608944 ],
[ '新居宿', 34.694139, 137.560778 ],
[ '白須賀宿', 34.688556, 137.500833 ]

// 以下略
];

//経路探索オブジェクト
var $directS = new google.maps.DirectionsService();
// ラインの色設定とか
var $lineOptions = {
 polylineOptions: { strokeWeight: 3, strokeColor: "#04F", strokeOpacity: 0.6 },
 markerOptions: { visible: false }
};
//地図オブジェクト
var $map = new google.maps.Map(document.getElementById("map"), {
 mapTypeId: google.maps.MapTypeId.ROADMAP
});
//インフォウィンドウオブジェクト
var $infoW = new google.maps.InfoWindow();


//各ポイントのマーカー作成処理
var createMarker = function(pt){
 var marker = new google.maps.Marker({
  position: pt[3],
  map: $map
 });
 google.maps.event.addDomListener(marker, "click", (function(p){
  return function(){
   $infoW.setContent(p[0] + "<br>( " + p[1] + ", " + p[2] + " )");
   $infoW.setPosition(p[3]);
   $infoW.open($map);
  }
 })(pt));
 return marker;
}

//経路表示処理(1リクエスト最大10ポイント)
var route = function(){
 var renderer = null, wayP = [];
 var p1 = points[pointIndex];
 var j, n = pointNum - pointIndex - 2;

 if(n>8) n = 8;
 var endIndex = pointIndex + n + 1, p2 = points[endIndex]; 
 for(j=pointIndex+1; j<endIndex; j++) wayP.push({
  location: points[j][3], stopover: true
 });
 pointIndex = endIndex;

 var request = {
  origin: p1[3],
  destination: p2[3],
  waypoints: wayP,
  travelMode: google.maps.DirectionsTravelMode.DRIVING
 };
 $directS.route(request, function(response, status){
  if (status == google.maps.DirectionsStatus.OK){
   renderer = new google.maps.DirectionsRenderer();
   renderer.setMap($map);
   renderer.setOptions( $lineOptions );
   renderer.setDirections( response );
  }
 });

 if(pointIndex < pointNum - 1) setTimeout( route, 101);
}


//メイン処理
var pointIndex = 0, pointNum = points.length;
var i, p = points[0];
var mBound = new google.maps.LatLngBounds(
  { lat: p[1], lng: p[2] }, { lat: p[1]+0.05, lng: p[2]+0.05 }
);
for(i=0; i<pointNum; i++){
 var p = points[i];
 p[3] = new google.maps.LatLng(p[1], p[2]);
 mBound = mBound.extend(p[3]);
 p[4] = createMarker(p);
}
$map.fitBounds(mBound);
route();

})();

ANo4です。

ちょっとだけ時間ができたので、簡単なものを作成してみましたが、10ルート以上が表示されませんね。
調べたところ、Direktionサービスの制限(10回/秒まで)に引っかかるようです。
https://developers.google.com/maps/documentation/directions/usage-limits

これを避けるには0.1秒ごとにリクエストするなどとしなければなりませんが、100ポイントでも10秒以上かかってしまうので、ウェイポイントも併用したほうが速くできそうです。

・・・ということで、作り直しました。
時間が無くなってきた...続きを読む

QGoogle maps API V3 ルート検索

Google maps API V3 のルート検索で、出発地と目的地のマーカー(アイコン)を独自のものにするには、どのように記述すればよろしいでしょうか?

デフォルトの設定では、出発地が“A”、目的地が“B”となっています。

以下、テストサンプルです。

http://itohiki119.iinaa.net/bousai/test.html

よろしくお願い致します。

Aベストアンサー

>>No.2 お礼

※関数の外(グローバルコード)に記述

// ラインオブジェクト
var lineObj = new google.maps.Polyline({
strokeColor: '#00FF00',
strokeOpacity: 0.5,
strokeWeight: 5
});
// 出発地マーカーオブジェクト
var startMarker = new google.maps.Marker({
icon: 'http://itohiki119.iinaa.net/bousai/icon/F_red_kage.png'
});
// 目的地マーカーオブジェクト
var endMarker = new google.maps.Marker({
icon: 'http://maps.google.co.jp/mapfiles/ms/icons/firedept.png'
});

function func(response) {
var routes = response.routes[0];
lineObj.setPath(routes.overview_path);
lineObj.setMap(map);

var legs = routes.legs[0];
startMarker.setPosition(legs.start_location);
startMarker.setMap(map);

endMarker.setPosition(legs.end_location);
endMarker.setMap(map);

map.fitBounds(routes.bounds); // 追記(自動的に...)
}
// 終了タグ直前にでも置く
</script>

>>No.2 お礼

※関数の外(グローバルコード)に記述

// ラインオブジェクト
var lineObj = new google.maps.Polyline({
strokeColor: '#00FF00',
strokeOpacity: 0.5,
strokeWeight: 5
});
// 出発地マーカーオブジェクト
var startMarker = new google.maps.Marker({
icon: 'http://itohiki119.iinaa.net/bousai/icon/F_red_kage.png'
});
// 目的地マーカーオブジェクト
var endMarker = new google.maps.Marker({
icon: 'http://maps.google.co.jp/mapfiles/ms/icons/firedept.png'
});

function func(respon...続きを読む

Qgoogle mapでのルート検索を良く利用していますが、一つ困ってい

google mapでのルート検索を良く利用していますが、一つ困っている事があります。

google mapが検索したルートを少しアレンジするのに白丸○で表されたポイントを
ドラッグすれば良いのですが、うまくドラッグ出来た試しがありません。

付近をぐるぐる何度も周回するようなルート地図が出来上がってしまいます。

何か途中のルートポイントを削除する方法などはあるのでしょうか?
みなさんはどのようにしてらっしゃいますか?

Aベストアンサー

補足確認しました。

(^^ゞ失礼しました言葉足らずでした。

不要なルート表示に○が有る時は○にカーソルを合わせて右クリックで、「このポイントを削除」で消せると思います。

無い場合は不要なルートを利用したいルートへドラッグで消えると思います。

>ちょっとごちゃごちゃした右左折の多いルート時なのか、時々ポイントをドラッグするとぐるぐる同じところを周回するんです。

ご指摘の様に表示してるルートと利用したいルートが近い場合はぐるぐると回る様な表示になりますね!

その様な場合は地図を拡大してルートを設定(上記の方法)を試して見て下さい、これは仕様だと思うので根気良く不要なポイント等を削除し続けて我慢するしか無いと思いますよ~?

QGoogle マップに同心円と文字を入れたい

ホームページ上のフレームに、Google マップのある地点を中心に、1km/3km/5km/10kmなどの同心円(半透明で外側ライン)とその距離の表示をしようとしています。
クリックで動かさず、同心円と表示は固定です。
お店からの距離になります。

同心円は、以下のページを見て書き込めました。
http://www.nanchatte.com/map/circle-v3.html

しかし、1kmならばその円の近くに「1km」と表示する方法がわかりません。
どなたか、教えてください。

Googleマップの「立て札」の入れ方は情報が得られますが、
それではなく単に「1km」などの文字を入れたいだけです。
Googleマップの縮尺を変えても文字は読めることが、前提となります。

簡単なことで、聞いているとしたら申し訳ありません。
Java系は初心者です。

Aベストアンサー

よく知りませんので、他にも方法があると思いますが、とりあえずそれっぽいものを。


1)普通に文字を入れるのなら、infoWindowが用意されています。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#InfoWindow
これだとユーザがクローズできたりするので…

2)makerを利用して、文字(=画像)を入れている例
http://www.tizdes.net/test_tile02.php?v=0.1

3)カスタムOverlayViewを利用して、文字を入れている例
http://www.mwsoft.jp/programming/googlemap/google_map_v3_custom_overlay.html

Q外部ファイルにしたら文字化けしてしまいました

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://~";
jmp[1] = "http://~";
jmp[2] = "http://~";
jmp[3] = "http://~";
jmp[4] = "http://~";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img1.jpg";
img[1] = "img/img2.jpg";
img[2] = "img/img3.jpg";
img[3] = "img/img4.jpg";
img[4] = "img/img5.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target='_blank'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先...続きを読む

Aベストアンサー

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

一般的に、Windowsの標準の環境だと。前段で述べた様な、様々な種類の文字コードを扱う事が出来ないので。事実上、作業は「Shift-JIS」1択と言う事になります。また『メモ帳(notepad.exe)』では「改行コード」を編集出来ないので、HTMLやJavaScript(JSファイル)を編集するには力不足です。何か特別なソフトとかを使わずに、Windows標準の『メモ帳(notepad.exe)』でJSファイルを編集したのであれば、十中八九、文字コードは「Shift-JIS」になっているはずです。


>文字コード
「文字コード」とは、コンピュータ上でテキストファイル(*.txt)をやり取りする時の方式の事で、現在では100種類近くの文字コードがあります。インターネット上でよく使われる文字コードは、「UTF-8」、「Shift-JIS」、「EUC-JP」~の3種類で、基本的にはこれだけ押さえておけばOKです。

考え方としては、日本語や英語のように。同じ意味を持つ文書でも色んな国の言葉で書く事が出来る様に。コンピュータ上での文書の表し方にも方言というか、色んな国の言葉がある様な物だと思ってて下さい。先に述べた「改行コード」や「BOM無し」とかは忘れて下さい。

で、初心者はコレだけ覚えて置いて欲しいのですが…

・半角英数文字だけなら文字化けは起きない

~と(実際は違いますが、話がややこしくなるので簡単にします)。半角英数文字ってのは「abc,?!#123456+-=」みたいな文字の事です。全角文字とは違うので注意して下さい(全角文字 → abc,?!#123456+-=)。従って逆説的に言えば「日本語を使う時は常に文字コードの影響を受ける」と言う事です。

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q