プログラミング

Google Map APIで地図にMarkerを描画する

2022-06-09




趣味で撮る写真をどうにか整理したくて。
ただリンク張るだけだと面白くないので、Google Map APIで地図の上にMarkerとリンクを描画してみました。
ついでにWordPressの上でJSファイルを別に管理しようとしたらちょっと面倒くさかったです。

完成形

現在は少し実装が変わっています。

Google Map APIでCustom Popupsを描画する

前回はMarkerというパーツを使って地図上にリンクを乗っけてたんですが。 このMarker、テキストを表示しようとしたらツールチップになってしまい、うまく表示ができなかったんですよね。。。 そこでA ...

続きを見る

実際に動くものはこちら。

no image
写真Top

更新履歴 2022/07/04 ネコの動画を追加 2022/07/03 ルイスアカマルハバチを追加 2022/07/03 ニホンカブラハバチを追加 2022/07/03 セグロカブラハバチを追加 20 ...

続きを見る

で、Markerでの実装で完成した地図がこれ。
更新ボタンを押すとチェックボックスがONになってる項目だけ表示するよう地図を再描画します。

ちなみにこの画像だとペグマンが表示されず空欄になってますが、WordPress側のCSSが干渉してたので修正しました。

ペグマンが行方不明になるので修正

Google Map APIを使って地図を作っていたんですが。 ペグマン表示されてないじゃん!! 幸い同じ現象について書いてる人がいたので無事解決。 ペグマン帰ってきました。 目次1 ペグマンとは2 ...

続きを見る

事前準備

Google Map APIは名前の通りGoogleが提供する地図のAPIです。
カスタマイズした地図の作成だけでなく、施設の情報やルート検索ができるAPIも用意されています。

毎月$200の無料枠が用意されていて、例えばJava Script APIであれば1000リクエストで$7。
登録にはクレジットカードが必要ですが、個人利用であれば大抵の場合は無課金で使えるんじゃないでしょうか。

公式ガイドを見ながら登録を済ませておきましょう。

地図にMarkerを描く

そんなに難しいことはしてないのでサクッと。
必要なものはこれだけ。

  • Marker用.png
  • 地図表示.html
  • スタイル.css
  • データ.js
  • 描画処理.js

公式のチュートリアルがあるので、先に読んだ方がわかりやすいかもしれません。

Marker用.png

画面に描画するためのアイコンを用意しておきます。
アイコン用の画像を指定しない場合はGoogle Mapでおなじみのあの赤いMarkerになるので、こだわりがなければなくても大丈夫です。

地図表示.html

表示を切り替えるためのチェックボックス&ボタンは適当に。
後で件数を表示したいのでspanで箱を作っています。

重要なのは<!--map Objectを描画する箱 -->以下のところです。

まず、地図自体はJavaScriptで用意するので箱だけ作っておきます。
そしてAPIを呼び出すためのリクエストをasyncで書きます。

この時、作成した地図をWEBで公開する場合はAPI Keyの制限は必ずかけておきましょう。
API Keyを不正に使用されると請求が大変なことになってしまうかもしれませんので。。。

スタイル.css

CSSはとりあえず地図のサイズだけ指定しておきます。

データ.js

描画するMarkerの数を可変にしたいので連想配列にしておきます。

位置情報の取得

Google Map APIで使う位置情報は世界測地系というやつです。
位置情報を取得する方法はいろいろありますが、Google Mapから取るのが簡単だと思います。
同じGoogle Mapからなら間違えて日本測地系の位置情報を取ることもないですしね。

  1. Google Mapで場所を検索
  2. 表示されたMarkerを右クリック

で位置情報がコピーできます。

描画処理.js

ちょっと長いけどこんな感じ。

function initMap()

こいつがAPIを使用するうえで一番重要なfunctionです。
HTMLに書いたAPIのリクエストが終わると自動で発火します。

ここで作成したMap ObjectにMarkerを追加していきますが、そのまま書くとObjectの用意が終わる前に追加処理が走ってエラーになってしまう可能性があります。
なのでaddListenerOnceで処理が終わるのを待ってから追加するようにします。

function addMarker(map, cbValues)

Markerの追加処理はいろいろやりたいので別functionにしました。

基本はここでMarkerを追加しますが、

更新ボタンを押したときに一旦リセットしてから描画したいので、既存のMarkerがある場合はすべて削除してます。
Markerを削除するにはMarker Objectに対してsetMap(null)を実行します。

WordPress上で地図を表示する

地図ができたら、後はWordPressにのせるだけ。

だと思ったら結構大変でした。。。

JSファイルはWordPressにUPできない

普通にJSファイルをUPしようとしたらセキュリティの問題があるからダメだと。
まぁわからんでもないけど。。。

プラグインでJSとCSSをWordPress上で管理できるようにする

さてどうするかと思ったらちょうどいいプラグインがありました。

無料版は機能制限がありますが、小規模の処理ならまぁ大丈夫でしょう。

場合によっては有料版の検討を

このプラグイン、無料版だとすべてのページで登録されたソースを降らせる仕組みになっているようです。
つまり本来はJSやCSSが必要がないはずのページを表示した場合でもファイルがダウンロードされてしまうと。

例えばロードが終わったときに何かを描画する処理があったとして、IDやクラスがたまたま被っていたら想定外のページで発火してレイアウトが崩れてしまうかもしれません。。。

まぁある程度は運用でカバーできますが、複雑なものを作る場合は有料版にした方がいいかもしれません。

複雑な処理はクラウドにしたほうがいいかも

AWSならLambda、GCPならGoogle Cloud Functionsですかね。
今回ならデータ.jsに書いたspot_listをクラウドから取得するイメージです。

その方が

  • 処理をクラウド側に任せられるのでブラウザ(端末)側のリソースを食わない
  • データリソースが大きくなっても対応可能

というメリットがあるかと。
LambdaもGoogle Cloud Functionsも無料枠があるので個人利用だと課金されないでしょうしね。
WordPressなんだから自分のサーバー上にPHPで書けと思わないでもないですが、Lambdaのほうがお手軽なので。。。

今は写真を整理する作業が多すぎて余裕がないですが、そのうちクラウド化したらまた書くと思います。

関連

Google Map APIでCustom Popupsを描画する

前回はMarkerというパーツを使って地図上にリンクを乗っけてたんですが。 このMarker、テキストを表示しようとしたらツールチップになってしまい、うまく表示ができなかったんですよね。。。 そこでA ...

続きを見る

ペグマンが行方不明になるので修正

Google Map APIを使って地図を作っていたんですが。 ペグマン表示されてないじゃん!! 幸い同じ現象について書いてる人がいたので無事解決。 ペグマン帰ってきました。 目次1 ペグマンとは2 ...

続きを見る

Google Map APIのデフォルトボタンを非表示にする

前回自分で作ったGoogole Mapからペグマンが行方不明になってた件。 表示自体は直ったけど、やっぱりストリートビューボタンいらないよね? ということで非表示にしちゃいました。 Google Ma ...

続きを見る

-プログラミング
-, ,

© 2022 そんなこと猫でもできる Powered by AFFINGER5