クラウドソーシングサイトの案件を眺めていて、ふと「Googleマップをカスタマイズしてサイトに組み込むにはどうやるんだっけ」と興味が湧いたので、ここ数日間はそれを試して遊んでました。

今回のゴール

ネットデビューしてから1x年の間、あちこちのブログサービスでブログを書いてきました。
現存しているのははてなダイアリーとはてなブログ、そしてここの計3つ。

で、旅行などに出かけた時の記事のURLを地図上にまとめることで、3つのブログの記事を横断的に読めるようにできたらちょっといいかも？
と思ったのでそれを作ってみました。

まずはマイマップを作成

Googleマップには「マイマップ」機能があり、Googleアカウントさえあれば自分で情報を書き入れた地図を作れます。
ゆくゆくは自動的にデータを追加できるような仕組みを組めるようになりたいものですが、まずは知ってる方法（手動）から、ということで。

Google マイマップの概要 – マイマップ ヘルプ

場所の検索と追加をちまちまと繰り返して、地名・アイキャッチ画像・記事のURLが入ったマイマップができました。

お出かけ写真＆動画記事まとめ(Google マイマップ)

マイマップは公開範囲を「一般公開」とすることでサイトにも埋め込めるようになります。

iframeで埋め込む

さて、マイマップの一覧または編集画面で、メニュー内にある「自分のサイトに埋め込む」をクリックすると貼り付け用のソースを取得できます。

googlemap_01

コピーしたソースをサイト内に貼り付ければさくっと地図を埋め込めます。
できあがったものがこちらです（料理番組っぽいノリ）。

写真＆動画記事まとめ – inomeme; // いのみーむ

Google Cloud Platformを契約する

さて、どちらかというとここからが本題。
今までやってきたのは一般的なユーザーに用意されたマップの使い方で、カスタマイズ性がそれほど高くありません。（数種類のデザインの中から選べる程度でした）

配色や表示内容など、より自由度の高いカスタマイズを行うには、開発者向けのGoogle Maps APIを利用することになります。
そして現在、同APIを利用するにはGoogle Cloud Platformの契約が必要です。

Google Maps Platform – Geo-location API  |  Google Maps Platform  |  Google Cloud

基本的には有料のサービスですが、365日間の試用期間(?)と月200ドルの無料クレジットがあるということで軽率に契約完了。
こんな辺境のサイトに無料分を超えるアクセスがあるとも考えにくいですし。

APIキーを取得し、外部のサイトから無断で利用されないようにHTTPリファラーの制限を追加しました。

API キーの使用  |  ドキュメント  |  Google Cloud

Google Maps APIでマイマップを読み込む

Google Maps Javascript APIの公式ドキュメントを（Google翻訳にかけながら）漁っていたら、今回作るものに流用できるサンプルコードを発見。
（マイマップからエクスポートできる）KMLファイルを地図に読み込み、さらに地図上のマーカーをクリックした時、情報を地図の中ではなく隣接するスペースに表示する仕組みになっています。

Displaying KML  |  Maps JavaScript API  |  Google Developers

これだーと思って、↑にあるサンプルソースを途中までJSfiddle上で書き換え、その後テキストエディタにコピーしてファイルを作成。
マイマップからKMZファイルをエクスポートし、それを読み込むようにして、APIキーも自分のものに差し替えました。

Styling Wizardで地図表示をカスタマイズ

地図のカスタマイズに使えるツールは以下のサイトで紹介されていました。

Google Maps APIs Styling Wizard を使って カスタマイズしたマップを使う ｜ Tips Note by TAM

同様のツールで「Styled Map Wizard」というのも検索でよくヒットしますが、見た目が古かったので今回はスルー。

Styling Wizardを実際に触ってみると、選択肢が多すぎて逆に困るくらいでした……
地図として表示される情報の種類をやや絞ったのと、配色を「Retro」テーマをベースに変更。

仕上げ

ついでなので興味のあったCSS Gridを使ってレイアウト。
飾りっ気の不足をなんとかしようとあがいた結果、IE 11とEdgeの旧バージョンへの対応が中途半端にはなりましたが、いちおう完成！

写真つきおでかけ投稿セルフまとめ | Renderseed lab.

感想

ちょっとした習作ながら、久しぶりにものを作れた感じがしたのでまあまあ楽しかったっす。
マップにデータを流し込む方法をもっと掘り下げられたら、作れるものの幅が広がるかな。