,

[Google Maps] Adding markers to a Google Map using a local JSON file

公開日: 2019/07/24
更新日: 2019/07/25

普通のウェブサイトにGoogleマップを埋め込み表示します。
ローカルの JSON ファイルに定義したデータを読み込みカスタムマーカーを複数表示します。

Contents

ファイル構成・前提

以下のような構成でファイルを配置しているものとします。
Google Maps JavaScript API キーは取得済みとします。

JavaScript は、webpack, Babel を利用している前提となっています。
WordPress サイトに設置している体となっています。
必要があれば読み換えてください。

./
├── css
├── data
│   └── map_markers.json
├── img
│   └── asset
│       └── icn
│           └── icn-pin.svg
├── index.html
├── js
│   ├── map.js
│   └── map_markers.js

なお、以降のコードはプロジェクトファイルから抜き出して校正をしていますので調整が必要な箇所があるかも知れません。

HTML を用意する

表示する HTML を用意します。

API を URL から呼んでいます。
map_markers.js にコードを用意するものとします。

本稿では触れませんがローディングイメージ用に <div class="js-loader"></div> をおくものとします。
Googlo Map のロードが完了後、何もせずとも消えます。

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
    </style>
  </head>
  <body>
    <div id="map"><div class="js-loader"></div></div>

    <!-- <?php wp_footer(); ?> -->
    <script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY'></script>
    <script type='text/javascript' src='/js/map_markers.js'></script>
  </body>
</html>

WordPress であれば wp_enqueue_scripts を利用して JavaScript を読み込みますので、例えば以下で同じようなコードとなります。

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 ファイルのパスとマップを表示するエリアを渡し、ウィンドウロード時にイニシャライズします。
具体的な処理は別にクラスファイルを用意します。

/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 ファイルには「緯度, 経度, バルーンコンテンツ, ピンタイプ」のデータを持たせます。

/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"
  }
]

マップの描画クラス

地道にメソッドを調べて実装していきますました。

力尽きたので Gist に上げて終わります。

補遺