メニューを閉じる

テクノモバイルグループ

メニューを開く

2019.05.27

プログラミング

GoogleMapsAPIで簡単に回転する矢印マーカーを使うサンプルコード

坂東です。

動態管理システムで多数の車両の位置と進行方向を表示したくなりましたが。
「Google Maps API マーカー 矢印 回転」とかでググってイマイチ使えるものがなかったので自作したのを共有します。

イメージ

 

コード(coffee.js)

 

要するにこういうことやってます。

1. iconにpathでSVG要素を指定
2. rotationで回転
3. MarkerWithLabelでアイコン上に文字を描画

たんに矢印1個だけ使いたいなら「google.maps.SymbolPath.FORWARD_CLOSED_ARROW」でググるともっと簡単な方法はあります。

おわり。


【テクノモバイルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』
https://qangaroo.jp/

最近の記事

SNS共有

X CLOSE
X CLOSE
X CLOSE