Google Map・よくある6つの要望に Google Maps JavaScript API で対応

zIf2XqF8w6zOg8UH

「Google APIキーの発行って面倒じゃないの…?」
Googleアカウントを持っていれば、公式サイトで簡単に発行できるので大丈夫。

検証済みブラウザとOS

  • IE 9~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X El Capitan
  • iOS 9
  • Android 5 / 6

 

6つ含めた完成形

緯度経度の調べ方

※マーカー以外のどこをクリックしてもOK。

do7529II1sgATsjJ

 

マウススクロールでの拡大縮小を禁止

 

マーカーを独自アイコンにする

絶対パスでアイコンを指定し、マーカー用のメソッドを書くだけ。

デフォルトのマーカーにしたい場合は icon: 指定を削除すればOK。

アイコン素材はこちらのサイトから。

 

マーカー上部に吹き出しを追加

地図を表示したときとマーカーをクリックしたときに表示させるコードを書くだけ。
定義箇所にはhtmlも書けるので、heading / p などを書いて id / class を指定してテキストを装飾することも可能。

 

ルートを線で表す

緯度経度を配列で格納して線の色や幅を指定するだけ。
緯度経度を調べるのが少し手間。

 

スタイルを変更する

いくつかのプロパティが用意されていて、シンプルにしたりスタイリッシュにも出来る。
しかしやり過ぎは禁物なので色と彩度を変更する程度に留めておく。

 

1ページに地図を複数表示させる

HTMLとCSSにはブロック要素とIDをそれぞれ用意し、JSには定義要素をそれぞれ用意する。
そして function initMap() 内で定義ごとにメソッドを書けばOK。

公式API以外にも、デザインをガラっと変えるサービスも存在するようだ。
必要以上の装飾は逆効果なので注意。

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは一度だけクリックしてお待ちください。