【Google Map】よくある6つのご要望に Google Maps JavaScript API で対処する [IE9対応]

zIf2XqF8w6zOg8UH

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

Google Maps JavaScript API を無料で利用する「標準プラン」の場合、2016年3月時点で下記の制限があります。

連続する 90 日間において、1 日あたりのマップロードが 25,000

無料の使用制限を超えた場合、1 日 25,000 回の超過分に対して 1,000 回ごとに $0.50 USD を課金、最大で 1 日あたり 1,000,000 回まで。
https://developers.google.com/maps/pricing-and-plans/?hl=ja

「90日連続で毎日25,000回読み込まれると、USドル換算で課金が発生しますよ」ということですか。課金の心配をするのは、それだけの人気サイトになってからで問題ありませんね。

また、Google Maps JavaScript API は iframe 埋め込みよりも利便性が高いです。

  • HTMLを汚さずシンプルにできる
  • 比較的簡易なJavaScriptコードで調整可能
  • CSSで width / height を自由に変更できるので、レスポンシブ対応が楽

目次

検証済みブラウザとOS

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

 

6つ含めた完成形

code

緯度経度の調べ方

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

do7529II1sgATsjJ

 

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

 

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

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

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

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

 

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

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

 

ルートを線で表す

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

 

スタイルを変更する

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

 

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

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

 

以上、よくあるご要望に Google Maps JavaScript API を使って対処する方法でした。

公式API以外にも、デザインをガラっと変えるサービスも存在するようです。

必要以上に装飾し過ぎないようご注意を。

    • このエントリーをはてなブックマークに追加