[Google Maps] Adding markers to a Google Map using a local JSON file
普通のウェブサイトにGoogleマップを埋め込み表示します。
ローカルの JSON ファイルに定義したデータを読み込みカスタムマーカーを複数表示します。
## ファイル構成・前提
以下のような構成でファイルを配置しているものとします。
Google Maps JavaScript API キーは取得済みとします。
JavaScript は、webpack, Babel を利用している前提となっています。
WordPress サイトに設置している体となっています。
必要があれば読み換えてください。
“`prettyprinted
./
├── css
├── data
│ └── map_markers.json
├── img
│ └── asset
│ └── icn
│ └── icn-pin.svg
├── index.html
├── js
│ ├── map.js
│ └── map_markers.js
“`
なお、以降のコードはプロジェクトファイルから抜き出して校正をしていますので調整が必要な箇所があるかも知れません。
## HTML を用意する
表示する HTML を用意します。
> – [Overview | Maps JavaScript API | Google Developers](https://developers.google.com/maps/documentation/javascript/tutorial)
API を URL から呼んでいます。
map_markers.js にコードを用意するものとします。
本稿では触れませんがローディングイメージ用に `
` をおくものとします。
Googlo Map のロードが完了後、何もせずとも消えます。
“`html:index.html
“`
WordPress であれば `wp_enqueue_scripts` を利用して JavaScript を読み込みますので、例えば以下で同じようなコードとなります。
“`php:functions.php
/**
* Enqueue scripts and styles.
*/
function your_theme_scripts() {
// for Google Maps.
if ( is_home() ) {
wp_enqueue_script( ‘your_theme-map-js’, ‘https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY’, array(), ‘20190327’, true );
wp_enqueue_script( ‘your_theme-map-markers-js’, get_template_directory_uri() . ‘/js/map_markers.min.js’, array( ‘your_theme-map-js’ ), ‘20190327’, true );
}
}
add_action( ‘wp_enqueue_scripts’, ‘your_theme_scripts’ );
“`
## マップの設定とイニシャライズ
JSON ファイルのパスとマップを表示するエリアを渡し、ウィンドウロード時にイニシャライズします。
具体的な処理は別にクラスファイルを用意します。
“`javascript:/js/map_makers.js
import YourMap from “./map”;
const path = “/wp-content/themes/your_theme”;
const jsonPath = `${path}/data/map_markers.json`;
const mapDiv = document.getElementById(“map”);
const mapCanvas = new google.maps.Map(mapDiv, {
zoom: 16,
center: { lat: 21.297643, lng: -157.839234 }
});
const map = new YourMap(jsonPath, mapCanvas);
google.maps.event.addDomListener(window, “load”, map.initMap());
“`
JSON ファイルには「緯度, 経度, バルーンコンテンツ, ピンタイプ」のデータを持たせます。
“`json:/data/map_markers.json
[
{
“lat”: 21.279489,
“lng”: -157.832262,
“content”: “Trump International Hotel Waikiki”,
“type”: “normal”
},
{
“lat”: 21.277053,
“lng”: -157.830193,
“content”: “Sheraton Waikiki”,
“type”: “normal”
},
{
“lat”: 21.282395,
“lng”: -157.837535,
“content”: “Hilton Hawaiian Village Waikiki Beach Resort”,
“type”: “special”
}
]
“`
## マップの描画クラス
地道にメソッドを調べて実装していきますました。
> – [Overview | Maps JavaScript API | Google Developers](https://developers.google.com/maps/documentation/javascript/tutorial)
力尽きたので Gist に上げて終わります。
## 補遺
> – [パフォーマンスに考慮したGoogle Maps JavaScript APIの使い方 – WPJ](https://www.webprofessional.jp/google-maps-javascript-api-the-right-way/)
> – [google-maps-api-template/script.js at master · sitepoint-editors/google-maps-api-template](https://github.com/sitepoint-editors/google-maps-api-template/blob/master/script.js)
> – [How to Create Custom HTML Markers on Google Maps – Level Up Coding](https://levelup.gitconnected.com/how-to-create-custom-html-markers-on-google-maps-9ff21be90e4b)
> – [【JavaScript・ES6】Google Mapの埋め込みスニペット – Yohei Isokawa](https://blog.yuhiisk.com/archive/2018/05/01/google-map-snippet.html)
> – [A simple class for loading the Google Maps Javascript API in browser async using ES6 and Promise](https://gist.github.com/mavame/b833b50085dc856acbccbb34ab1dbe92)