Googleマップとスライダーを連携させる

とある案件でGoogleマップにマーカー（ピン）を立て、マーカーに関する情報をスライダーに表示させる実装を行いました。

• 制作したサンプルページ
• コード例

当初ES6でコードを書いていたのですが、ゴールデンウィークで時間があることもあり以前から関心を寄せていたTypeScriptで書くとどうなるか試してみるなどしました。TypeScriptは型定義について覚えればわりとスムーズに始められるのではないかと感じました。

本題の「Googleマップとスライダーを連携させる」ですが、APIが充実したスライダーのプログラム「Swiper」を使用することで意外と楽に実装が行えました。ただ、普段jQueryやjQueryプラグインのみ使われている方には難しいかもしれませんね。やはり「継承とプロトタイプチェーン」あたりを理解する必要があるでしょう。ただ、ES6で導入された 「クラス」を使用することで以前よりは書きやすいのではないかとも思います。（しかし、ターゲットブラウザにIEが入るとBabelでトランスパイルする必要があり、またややこしくなるのかと...。）

クラス構文を理解したら、後は必要な処理を整理してメソッドを書いていきます。今回は以下のようなメソッドを書きました。スライドが動いた場合の処理・マーカーをクリックした場合の処理を書くために「イベント」も理解する必要があるでしょう。ただ、jQueryでもよく書く処理ですね。

• Googleマップのインスタンス化
• Swiperのインスタンス化
  • スライドが動いた場合の処理
• マッピングデータの取得
• マーカーの配置
  • マーカーをクリックした場合の処理
• マーカー画像の変更
• Swiperスライドの作成

メソッドを書き終えたらGoogleMapのインスタンスを作成し、initメソッドを実行して表示させます。selectorやjsonPathを変更することで、同じような機能を持つマップを複数配置することができます。

const schoolMap = new GoogleMap({
    selector: '#schoolmap',
    jsonPath: 'json/schools.json',
    center: {
        lat: 34.51044761493913,
        lng: 133.37627491015624
    }
});
schoolMap.init();

書店でいくつかの書籍を見ましたが、jQueryの世界からステップアップしようにもなかなか良いものが見つからないように感じました。私は今回記事に書いたような実装の仕方を以前在籍していた会社の先輩が書いたコードから学びました。（その他、オライリーの「JavaScript 第5版」を読みました。）TypeScriptで書いたために変数の型が書いてありSwiftやJava等の言語に触れた経験がない方には少し難しいかもしれませんが、JavaScriptの技術を磨いていきたいというエンジニアの方はぜひソースを眺めてみて下さい。

なお、サンプルコードに記載しているGoogleのAPIキーはリファラ制限を設定していますので、ご自身のAPIキーを作成してお試し下さい。