google map apiをつかって表示したルート案内(setPanel)のマーカーを違うものに変更したいのですが、方法ありますでしょうか?地図上のマーカーは変更できるのですが、案内の方が変更の方法がわからず困っています。何かヒントやサイトで結構なのでご助言頂けると助かります。。
gmapのルートを実装は下記ライブラリを使用します。hpneo.github.io/gmaps/
▼ 目的地のマーカーを設定するoverlayを使用すればgmap上にhtmlを設置できますのでcssで自由に見た目を変更できます。hpneo.github.io/gmaps/examples/overlays.html
普通にマーカーを設置してiconオプションで変更しても良いです。
▼ ルートを設定するhpneo.github.io/gmaps/examples/routes.html
ありがとうございます。このアイコンの変更は知っているのですが、変更したいのはルート案内(xxを左折1km、xxを直進)にある各ポイントのアイコンです。地図上のアイコンを変更しても、ここのアイコンはデフォルトのままになっているのです。
hpneo.github.io/gmaps/examples/travel_route.html
上記のソースの47行目で(xxを左折1km、xxを直進)にあたる部分をappendしています。この前の段階でroutes.stepsのオブジェクトを見てみるとそれぞれの座標が取得できると思います。座標が取得できればオリジナルのマーカーを地図上に設置出来ると思います。
またまたありがとうございます。なるほど、情報をもとにごにょごにょする感じですね。試してみます!
即席ですが下記のような感じでしょうか
codepen.io/noidea-xyz/pen/ZWPKZJ?editors=1111
おお、わざわざありがとうございます。参考にさせていただきますー。
素晴らしいコメ主だな
みんなの回答 2 件
gmapのルートを実装は
下記ライブラリを使用します。
hpneo.github.io/gmaps/
▼ 目的地のマーカーを設定する
overlayを使用すればgmap上に
htmlを設置できますのでcssで自由に見た目を変更できます。
hpneo.github.io/gmaps/examples/overlays.html
普通にマーカーを設置して
iconオプションで変更しても良いです。
▼ ルートを設定する
hpneo.github.io/gmaps/examples/routes.html
即席ですが下記のような感じでしょうか
codepen.io/noidea-xyz/pen/ZWPKZJ?editors=1111
関連するトピックス