W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:0IOM.z さんの質問

google map apiをつかって表示したルート案内(setPanel)のマーカーを違うものに変更したいのですが、方法ありますでしょうか?
地図上のマーカーは変更できるのですが、案内の方が変更の方法がわからず困っています。何かヒントやサイトで結構なのでご助言頂けると助かります。。

みんなの回答 2 件

ID:iGrAfG さんの回答

gmapのルートを実装は
下記ライブラリを使用します。
hpneo.github.io/gmaps/

▼ 目的地のマーカーを設定する
overlayを使用すればgmap上に
htmlを設置できますのでcssで自由に見た目を変更できます。
hpneo.github.io/gmaps/examples/overlays.html

普通にマーカーを設置して
iconオプションで変更しても良いです。

▼ ルートを設定する
hpneo.github.io/gmaps/examples/routes.html

ID:0IOM.z

ありがとうございます。このアイコンの変更は知っているのですが、変更したいのはルート案内(xxを左折1km、xxを直進)にある各ポイントのアイコンです。地図上のアイコンを変更しても、ここのアイコンはデフォルトのままになっているのです。

ID:iGrAfG

hpneo.github.io/gmaps/examples/travel_route.html

上記のソースの47行目で
(xxを左折1km、xxを直進)にあたる部分をappendしています。
この前の段階でroutes.stepsのオブジェクトを見てみると
それぞれの座標が取得できると思います。
座標が取得できればオリジナルのマーカーを地図上に設置出来ると思います。

ID:0IOM.z

またまたありがとうございます。なるほど、情報をもとにごにょごにょする感じですね。試してみます!

ID:iGrAfG さんの回答

即席ですが下記のような感じでしょうか

codepen.io/noidea-xyz/pen/ZWPKZJ?editors=1111

ID:0IOM.z

おお、わざわざありがとうございます。参考にさせていただきますー。

ID:KatxMU

素晴らしいコメ主だな

最終更新日:2016-05-11 (717 views)

関連するトピックス

ページ上部に戻る