DriftwoodJP/adding-markers-to-google-map-using-local-json-file_index.html

## adding-markers-to-google-map-using-local-json-file_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>

    <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>

## map.js
/**
 * Rendering a Google Map from a JSON file.
 *
 * Adding markers to a Google Map using a local JSON file | deadwood
 * {@link https://www.d-wood.com/blog/2019/07/24_11342.html}
 */
export default class YourMap {
  /**
   * Constructor
   */
  constructor(jsonPath, mapCanvas) {
    this._jsonPath = jsonPath;
    this._mapCanvas = mapCanvas;
    this._themePath = "/wp-content/themes/your_theme";
    this._icons = {
      normal: {
        icon: null
      },
      special: {
        icon: `${this._themePath}/img/asset/icn/icn-pin.svg`
      }
    };
  }

  /**
   * Initializing a Google Map.
   */
  initMap() {
    fetch(this._jsonPath)
      .then(response => response.json())
      .then(m => this.plotMarkers(m));
  }

  /**
   * Plot marker pins to mapCanvas.
   */
  plotMarkers(m) {
    const mapCanvas = this._mapCanvas;
    let markers = [];
    let bounds = new google.maps.LatLngBounds();

    m.forEach(marker => {
      const position = new google.maps.LatLng(marker.lat, marker.lng);
      const { content, type } = marker;

      markers.push(this.createMarker(position, content, type));
      bounds.extend(position);
    });

    if (markers.length === 1) {
      return mapCanvas.bounds;
    } else {
      return mapCanvas.fitBounds(bounds);
    }
  }

  /**
   * Create marker pin.
   */
  createMarker(position, content, type) {
    const mapCanvas = this._mapCanvas;
    const icons = this._icons;

    const marker = new google.maps.Marker({
      position: position,
      map: mapCanvas,
      content: content,
      icon: icons[type].icon,
      animation: google.maps.Animation.DROP
    });

    const infowindow = new google.maps.InfoWindow({
      content: `<div>${marker.content}</div>`
    });

    marker.addListener("click", () => {
      infowindow.open(mapCanvas, marker);
    });
  }
}

## 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());

## 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"
  }
]
	<!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>

	<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>
	/**
	* Rendering a Google Map from a JSON file.
	*
	* Adding markers to a Google Map using a local JSON file \| deadwood
	* {@link https://www.d-wood.com/blog/2019/07/24_11342.html}
	*/
	export default class YourMap {
	/**
	* Constructor
	*/
	constructor(jsonPath, mapCanvas) {
	this._jsonPath = jsonPath;
	this._mapCanvas = mapCanvas;
	this._themePath = "/wp-content/themes/your_theme";
	this._icons = {
	normal: {
	icon: null
	},
	special: {
	icon: `${this._themePath}/img/asset/icn/icn-pin.svg`
	}
	};
	}

	/**
	* Initializing a Google Map.
	*/
	initMap() {
	fetch(this._jsonPath)
	.then(response => response.json())
	.then(m => this.plotMarkers(m));
	}

	/**
	* Plot marker pins to mapCanvas.
	*/
	plotMarkers(m) {
	const mapCanvas = this._mapCanvas;
	let markers = [];
	let bounds = new google.maps.LatLngBounds();

	m.forEach(marker => {
	const position = new google.maps.LatLng(marker.lat, marker.lng);
	const { content, type } = marker;

	markers.push(this.createMarker(position, content, type));
	bounds.extend(position);
	});

	if (markers.length === 1) {
	return mapCanvas.bounds;
	} else {
	return mapCanvas.fitBounds(bounds);
	}
	}

	/**
	* Create marker pin.
	*/
	createMarker(position, content, type) {
	const mapCanvas = this._mapCanvas;
	const icons = this._icons;

	const marker = new google.maps.Marker({
	position: position,
	map: mapCanvas,
	content: content,
	icon: icons[type].icon,
	animation: google.maps.Animation.DROP
	});

	const infowindow = new google.maps.InfoWindow({
	content: `<div>${marker.content}</div>`
	});

	marker.addListener("click", () => {
	infowindow.open(mapCanvas, marker);
	});
	}
	}
	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());
	[
	{
	"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"
	}
	]