ES6でGoogle Maps埋め込みクラスを書いてみる

ブログ

2017.08.16 コーディング

ES6でGoogle Maps埋め込みクラスを書いてみる

Google Mapsを埋め込んで白黒にしたりなんかしてマーカーをオリジナルのものにしたいというありがちな依頼を受けるたびに、それ前もやったけどやり方忘れたわテヘペロってなるのでまとめておこうと思った。あとコピペすればいい話なんだけど複数のマップ埋め込むとコードがやたらと冗長になるのが嫌だった。あと単純にES6のClass使ってみたかった。

一応Google Mapsの基本的な埋め込み方もおさらいしておくと

Google Maps開いて場所指定して右クリックしてこの場所について選んで地図の埋め込み選んでコードコピって貼り付ける!!!これで分からなければググれ!!!

でしたね。簡単ですね。しかしこれでは地図をカスタマイズすることはできず、カスタマイズしたければGoogle Maps APIを利用するしかない。

Google Maps APIを用いてGoogle Mapsを埋め込む方法のおさらい

下準備

去年あたりからGoogle Maps APIを叩くためにはAPIキーが必須になったのでとりあえずこれを取得しないと話にならない。調べればいくらでも出てくるのではしょって取得方法はGoogle Maps API ガイドを参考にどうぞ。

取得できたらGoogle Maps APIをロードするおまじないを記述しておく。

これで準備はOK

Google Mapsインスタンスを生成する

Google公式ドキュメントから引用すると

こんな関数を作ってonloadとかで実行させれば良い。ちなみに上記の例だとidがmapである要素に地図が表示されるはずだが、cssでmapに高さを持たせてあげないと何も表示されないので注意。

白黒にしてマーカーをオリジナル画像に変えてみる

前述のinitMapという関数に色々オプションを記述してあげれば好みにカスタマイズした地図が作れるわけだ。実際に白黒にしてマーカーをオリジナル画像に変更するようにオプション指定して書いてみると

結構長い。1ページに複数の地図を埋め込むとなるとこれをずらずら並べるはめになる。それはあまりに美しくないので自分用に整理しておこうと思ったわけ。

ES6でClass化してみる

先に出来上がったコードを記載する。

こんな感じ。なんのことはない、いつもコピペしているものをまとめただけである。上記クラスを外部ファイルにして読み込み、html内で

とかってインスタンスを生成すれば良い。

コンストラクタに色々引数を渡せるようにしておいたが、特に指定する必要がない場合に対応するためor演算子で初期値を設定しておいた。引数を指定しなければidがmapである要素にマーカーにmarker.pngが使われている新宿駅を中心とした地図が表示されるはずだ。ちょっと指定してみると

とかってやればidがfukuokaである要素に福岡駅の地図が白黒で表示されるはずだ。

IE対策

またお前かという感じだが、上記コードはES6構文を用いているためInternet Explorerでは動かない。いい加減にして欲しい。その他ブラウザでもES6構文では動かない場合もあるので対応表をチェックしておこう。

ECMAScript 6 compatibility table

じゃあどうするかっていうとES5にトランスパイルしてあげれば良い。Babelを使っておけば大体のブラウザには対応できるはず、多分。

Babel · The compiler for writing next generation JavaScript

一応トランスパイル後のコードも記載しておく。

IEが対応ブラウザに含まれている限りはES6でjsを書く場合はgulp-babelなどを使って自動でトランスパイルする環境を構築する必要があるだろう。IEなんて滅びればいいのに。

なんというか別にクラス化する必要もなかったのでは?という感じもするが今後もES6に慣れる意味でも積極的に使っていきたい。

CONTACT
お問い合せ・お見積りはこちらから
  • 03-6279-3013 お問い合わせは 月~金 10:00~19:00

  • メールでのお問い合せはこちら
c