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

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

1 完成形
2 事前準備
3 地図にMarkerを描く
4 WordPress上で地図を表示する
5 関連

完成形

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

: Google Map APIでCustom Popupsを描画する

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

続きを見る

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

: 写真Top

更新履歴 2024/03/02 アカゲラ&オニオオハシの動画を追加 2024/02/26 多々良沼公園(Tatara Marsh Park)を追加 2024/02/25 桐生自然観察の森に行っ ...

続きを見る

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

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

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

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

続きを見る

事前準備

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

Google Maps Platform

Google Maps Platform - 位置情報およびマッピングソリューション

https://mapsplatform.google.com/?hl=ja

Google Maps Platform の位置情報ソリューションでは、動的なマップ、ルート、プレイス用の API を使用して、現実世界のリアルタイムエクスペリエンスを作成し、顧客に提供できます。

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

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

Google Developers

Getting started with Google Maps Platform | Google Developers

https://developers.google.com/maps/get-started

地図にMarkerを描く

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

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

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

Google Developers

Adding a Google Map with a Marker to Your Website | Maps JavaScript API | ...

https://developers.google.com/maps/documentation/javascript/adding-a-google-map

Marker用.png

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

地図表示.html

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

重要なのは以下のところです。

<!-- checkboxと更新ボタン -->
<div>
<div><input id="cb_park" type="checkbox" /><img class="alignnone wp-image-3049"
src="https://nekodeki.com/wp-content/uploads/2022/05/grn-blank.png" alt="" width="24" height="24" /> 公園(Park)<span id="cnt_park"></span></div>
<div><input id="cb_zoo" type="checkbox" /><img class="alignnone wp-image-3049"
src="https://nekodeki.com/wp-content/uploads/2022/05/red-blank.png" alt="" width="24" height="24" /> 動物園(Zoo)<span id="cnt_zoo"></span></div>
<div><input id="cb_aquarium" type="checkbox" /><img class="alignnone wp-image-3049"
src="https://nekodeki.com/wp-content/uploads/2022/05/blu-blank.png" alt="" width="24" height="24" /> 水族館(Aquarium)<span id="cnt_aquarium"></span></div>
<div><input id="btn_refresh" type="button" value="更新" /></div>
</div>
<!--map Objectを描画する箱 -->
<div id="map"></div>
<!-- Goole Map APIを呼び出すためのリクエスト -->
<script
src="https://maps.googleapis.com/maps/api/js?key=【自分のAPI Key】&callback=initMap&libraries=&v=weekly"
async></script>

<div>

<div><input id="cb_park" type="checkbox" /><img class="alignnone wp-image-3049"

src="https://nekodeki.com/wp-content/uploads/2022/05/grn-blank.png" alt="" width="24" height="24" /> 公園(Park)<span id="cnt_park"></span></div>

<div><input id="cb_zoo" type="checkbox" /><img class="alignnone wp-image-3049"

src="https://nekodeki.com/wp-content/uploads/2022/05/red-blank.png" alt="" width="24" height="24" /> 動物園(Zoo)<span id="cnt_zoo"></span></div>

<div><input id="cb_aquarium" type="checkbox" /><img class="alignnone wp-image-3049"

src="https://nekodeki.com/wp-content/uploads/2022/05/blu-blank.png" alt="" width="24" height="24" /> 水族館(Aquarium)<span id="cnt_aquarium"></span></div>

</div>

<script

src="https://maps.googleapis.com/maps/api/js?key=【自分のAPI Key】&callback=initMap&libraries=&v=weekly"

async></script>

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

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

Google Developers

Using API Keys | Maps JavaScript API | Google Developers

https://developers.google.com/maps/documentation/javascript/get-api-key#restrict_key

スタイル.css

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

#map {
height: 500px;
width: 100%;
}

#map {

height: 500px;

width: 100%;

}

データ.js

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

// 地図の中心になる位置情報
const default_latlon = { lat: 35.9156984, lng: 139.5788846 };
// アイコンのURL
const icon_green = "https://nekodeki.com/wp-content/uploads/2022/05/grn-blank.png";
const icon_blue = "https://nekodeki.com/wp-content/uploads/2022/05/blu-blank.png";
const icon_red = "https://nekodeki.com/wp-content/uploads/2022/05/red-blank.png";
// データの連想配列
const spot_list = {
park : [
{
view : true,
name_jp: "羽生水郷公園",
lat: 36.1715691,
lng: 139.5950263,
url: "https://nekodeki.com/photo-top/spot-list/hanyu-suigo-park/"
}
],
aquarium : [
{
view : false,
name_jp: "サンシャイン水族館",
lat: 35.7289254,
lng: 139.7201573,
url: "https://sunshinecity.jp/aquarium/"
},
{
view : true,
name_jp: "さいたま水族館",
lat: 36.1730556,
lng: 139.5977778,
url: "https://nekodeki.com/photo-top/spot-list/saitama-aquarium/"
}
],
zoo : [
{
view : false,
name_jp: "上野動物園",
lat: 35.7164535,
lng: 139.7713177,
url: "https://www.tokyo-zoo.net/zoo/ueno/"
}
]
};

// 地図の中心になる位置情報

const default_latlon = { lat: 35.9156984, lng: 139.5788846 };

// アイコンのURL

const icon_green = "https://nekodeki.com/wp-content/uploads/2022/05/grn-blank.png";

const icon_blue = "https://nekodeki.com/wp-content/uploads/2022/05/blu-blank.png";

const icon_red = "https://nekodeki.com/wp-content/uploads/2022/05/red-blank.png";

// データの連想配列

const spot_list = {

park : [

{

view : true,

name_jp: "羽生水郷公園",

lat: 36.1715691,

lng: 139.5950263,

url: "https://nekodeki.com/photo-top/spot-list/hanyu-suigo-park/"

}

aquarium : [

{

view : false,

name_jp: "サンシャイン水族館",

lat: 35.7289254,

lng: 139.7201573,

url: "https://sunshinecity.jp/aquarium/"

{

view : true,

name_jp: "さいたま水族館",

lat: 36.1730556,

lng: 139.5977778,

url: "https://nekodeki.com/photo-top/spot-list/saitama-aquarium/"

}

zoo : [

{

view : false,

name_jp: "上野動物園",

lat: 35.7164535,

lng: 139.7713177,

url: "https://www.tokyo-zoo.net/zoo/ueno/"

}

]

};

位置情報の取得

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

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

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

描画処理.js

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

// html要素
let btn_refresh;
let cb_park;
let cb_zoo;
let cb_aquarium;
let cnt_park;
let cnt_zoo;
let cnt_aquarium;
let cntNums = {"park": 0, "zoo": 0, "aquarium": 0};
let gMap;
let markers = [];
let cbVals = {"park": true, "zoo": true, "aquarium": true};
/**
* DOMツリーの構築が完了した時点で発火するイベント
* 各要素を変数にセット
* 各スポットの件数を取得してHTMLにセット
* 更新ボタンのイベントをセット
*/
document.addEventListener("DOMContentLoaded", function() {
// チェックボックス初期設定
cb_park = document.getElementById("cb_park");
cb_zoo = document.getElementById("cb_zoo");
cb_aquarium = document.getElementById("cb_aquarium");
cb_zoo.checked = true;
cb_park.checked = true;
cb_aquarium.checked = true;
// 件数
cnt_park = document.getElementById("cnt_park");
cnt_zoo = document.getElementById("cnt_zoo");
cnt_aquarium = document.getElementById("cnt_aquarium");
rewriteCnt();
// 更新ボタン
btn_refresh = document.getElementById("btn_refresh");
btn_refresh.addEventListener('click', event => {refreshMarker()});
});
/**
* 画像なども含めてすべてのリソースを読み込んだ後に発火するイベント
* 各スポットの件数を取得してHTMLにセット
*/
window.onload = function() {
// DOMContentLoaded時にinitMapが終わっていなかった場合の保険
rewriteCnt();
};
/**
* Google APIが読み込まれたら自動で実行される
* マップの初期化を行う
*/
function initMap() {
// Mapオブジェクト作成
const firstViewPoint = default_latlon;
gMap = new google.maps.Map(document.getElementById("map"), {
zoom: 9,
center: firstViewPoint,
});
// マップの読み込みが終わったら要素を追加
google.maps.event.addListenerOnce(gMap, "idle", function(){
addMarker(gMap, cbVals);
});
};
/**
* マップにマーカーを追加する
* @param {google.maps.Map} map - Google Map オブジェクト
* @param {object} cbValues - checkboxの値を格納した連想配列
*/
function addMarker(map, cbValues) {
// 既存のmarkerがあればすべて削除する
markers.forEach((oldMarker) => {
oldMarker.setMap(null);
});
markers = [];
// 施設情報読み込み
let icon_url;
Object.keys(spot_list).forEach(function(key) {
switch (key){
case "park":
icon_url = icon_green;
break;
case "aquarium":
icon_url = icon_blue;
break;
case "zoo":
icon_url = icon_red;
break;
default:
icon_url = icon_green;
}
// checkboxがONなら描画
if (cbValues[key] === true) {
// 新しいマーカーを追加する
let cnt = 0;
spot_list[key].forEach((spot) => {
if (spot["view"]) {
cnt = cnt + 1;
let marker = new google.maps.Marker({
position: {lat: spot["lat"], lng: spot["lng"]},
title: spot["name_jp"],
icon: {url: icon_url}
});
marker.addListener("click", () => {
window.location.href = spot["url"];
});
marker.setMap(map);
markers.push(marker);
}
cntNums[key] = cnt;
});
}
});
}
/**
* Markerを更新する
*/
function refreshMarker() {
// チェックボックスの状態を反映する
cbVals["park"] = cb_park.checked;
cbVals["zoo"] = cb_zoo.checked;
cbVals["aquarium"] = cb_aquarium.checked;
// チェックボックスの状態を渡してMarkerを再描画する
addMarker(gMap, cbVals);
// 件数を再描画する
rewriteCnt();
}
/**
* 件数を更新する
*/
function rewriteCnt() {
cnt_park.innerText = cntNums["park"] + "件";
cnt_zoo.innerText = cntNums["zoo"] + "件";
cnt_aquarium.innerText = cntNums["aquarium"] + "件";
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

// html要素

let btn_refresh;

let cb_park;

let cb_zoo;

let cb_aquarium;

let cnt_park;

let cnt_zoo;

let cnt_aquarium;

let cntNums = {"park": 0, "zoo": 0, "aquarium": 0};

let gMap;

let markers = [];

let cbVals = {"park": true, "zoo": true, "aquarium": true};

/**

* DOMツリーの構築が完了した時点で発火するイベント

* 各要素を変数にセット

* 各スポットの件数を取得してHTMLにセット

* 更新ボタンのイベントをセット

document.addEventListener("DOMContentLoaded", function() {

// チェックボックス初期設定

cb_park = document.getElementById("cb_park");

cb_zoo = document.getElementById("cb_zoo");

cb_aquarium = document.getElementById("cb_aquarium");

cb_zoo.checked = true;

cb_park.checked = true;

cb_aquarium.checked = true;

// 件数

cnt_park = document.getElementById("cnt_park");

cnt_zoo = document.getElementById("cnt_zoo");

cnt_aquarium = document.getElementById("cnt_aquarium");

rewriteCnt();

// 更新ボタン

btn_refresh = document.getElementById("btn_refresh");

btn_refresh.addEventListener('click', event => {refreshMarker()});

});

/**

* 画像なども含めてすべてのリソースを読み込んだ後に発火するイベント

* 各スポットの件数を取得してHTMLにセット

window.onload = function() {

// DOMContentLoaded時にinitMapが終わっていなかった場合の保険

rewriteCnt();

};

/**

* Google APIが読み込まれたら自動で実行される

* マップの初期化を行う

function initMap() {

// Mapオブジェクト作成

const firstViewPoint = default_latlon;

gMap = new google.maps.Map(document.getElementById("map"), {

zoom: 9,

center: firstViewPoint,

});

// マップの読み込みが終わったら要素を追加

google.maps.event.addListenerOnce(gMap, "idle", function(){

addMarker(gMap, cbVals);

});

};

/**

* マップにマーカーを追加する

* @param {google.maps.Map} map - Google Map オブジェクト

* @param {object} cbValues - checkboxの値を格納した連想配列

function addMarker(map, cbValues) {

// 既存のmarkerがあればすべて削除する

markers.forEach((oldMarker) => {

oldMarker.setMap(null);

});

markers = [];

// 施設情報読み込み

let icon_url;

Object.keys(spot_list).forEach(function(key) {

switch (key){

case "park":

icon_url = icon_green;

break;

case "aquarium":

icon_url = icon_blue;

break;

case "zoo":

icon_url = icon_red;

break;

default:

icon_url = icon_green;

}

// checkboxがONなら描画

if (cbValues[key] === true) {

// 新しいマーカーを追加する

let cnt = 0;

spot_list[key].forEach((spot) => {

if (spot["view"]) {

cnt = cnt + 1;

let marker = new google.maps.Marker({

position: {lat: spot["lat"], lng: spot["lng"]},

title: spot["name_jp"],

icon: {url: icon_url}

});

marker.addListener("click", () => {

window.location.href = spot["url"];

});

marker.setMap(map);

markers.push(marker);

}

cntNums[key] = cnt;

});

}

});

}

/**

* Markerを更新する

function refreshMarker() {

// チェックボックスの状態を反映する

cbVals["park"] = cb_park.checked;

cbVals["zoo"] = cb_zoo.checked;

cbVals["aquarium"] = cb_aquarium.checked;

// チェックボックスの状態を渡してMarkerを再描画する

addMarker(gMap, cbVals);

// 件数を再描画する

rewriteCnt();

}

/**

* 件数を更新する

function rewriteCnt() {

cnt_park.innerText = cntNums["park"] + "件";

cnt_zoo.innerText = cntNums["zoo"] + "件";

cnt_aquarium.innerText = cntNums["aquarium"] + "件";

}

function initMap()

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

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

// マップの読み込みが終わったら要素を追加
google.maps.event.addListenerOnce(gMap, "idle", function(){
addMarker(gMap, cbVals);
});

// マップの読み込みが終わったら要素を追加

google.maps.event.addListenerOnce(gMap, "idle", function(){

addMarker(gMap, cbVals);

});

function addMarker(map, cbValues)

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

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

// checkboxがONなら描画
if (cbValues[key] === true) {
// 新しいマーカーを追加する
let cnt = 0;
spot_list[key].forEach((spot) => {
if (spot["view"]) {
cnt = cnt + 1;
let marker = new google.maps.Marker({
position: {lat: spot["lat"], lng: spot["lng"]},
title: spot["name_jp"],
icon: {url: icon_url}
});
marker.addListener("click", () => {
window.location.href = spot["url"];
});
marker.setMap(map);
markers.push(marker);
}
cntNums[key] = cnt;
});
}

// checkboxがONなら描画

if (cbValues[key] === true) {

// 新しいマーカーを追加する

let cnt = 0;

spot_list[key].forEach((spot) => {

if (spot["view"]) {

cnt = cnt + 1;

let marker = new google.maps.Marker({

position: {lat: spot["lat"], lng: spot["lng"]},

title: spot["name_jp"],

icon: {url: icon_url}

});

marker.addListener("click", () => {

window.location.href = spot["url"];

});

marker.setMap(map);

markers.push(marker);

}

cntNums[key] = cnt;

});

}

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

// 既存のmarkerがあればすべて削除する
markers.forEach((oldMarker) => {
oldMarker.setMap(null);
});

// 既存のmarkerがあればすべて削除する

markers.forEach((oldMarker) => {

oldMarker.setMap(null);

});

WordPress上で地図を表示する

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

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

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

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

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

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

WordPress.org 日本語

Simple Custom CSS and JS

https://ja.wordpress.org/plugins/custom-css-js/

最高のエディタで、ウェブサイトに独自の CSS や JS を簡単に追加できます。

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

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

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

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

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

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

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

その方が

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

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

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

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

完成形

Google Map APIでCustom Popupsを描画する

写真Top

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

事前準備

地図にMarkerを描く

Marker用.png

地図表示.html

スタイル.css

データ.js

位置情報の取得

描画処理.js

function initMap()

function addMarker(map, cbValues)

WordPress上で地図を表示する

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

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

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

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

関連

Google Map APIでCustom Popupsを描画する

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

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