Google Maps Api - WP integration

maps.js

jQuery.noConflict();
(function ($) {
	if (jQuery('#locations-map')) {
		if (window.addEventListener)
			window.addEventListener('load', initMap(), false);
		else if (window.attachEvent)
			window.attachEvent('onload', initMap());
		else
			onload = initMap();
	}

	function initMap() {
		if (typeof (Event) === 'function') {
			// modern browsers
			window.dispatchEvent(new Event('resize'));
		} else {
			// for IE and other old browsers
			// causes deprecation warning on modern browsers
			var evt = window.document.createEvent('UIEvents');
			evt.initUIEvent('resize', true, false, window, 0);
			window.dispatchEvent(evt);
		}
		let mapOptions = {
			center: new google.maps.LatLng(34.1283951, -47.0535656),
			zoom: 2.5,
			minZoom: 2.5,
			maxZoom: 10,
			styles: mapStyling(),
			disableDefaultUI: true,
			gestureHandling : 'greedy'
		};
		let map        = new google.maps.Map(document.getElementById('locations-map'), mapOptions);

		setMarkers(map, getLocations());
	}

	async function getLocations() {
		try {
			let locations = await axios.get("/wp-json/your-theme/v1/locations");
			return Promise.all(locations.data);
		} catch (error) {
			console.error(error);
		}
	}

	async function setMarkers(map, locations) {
		try {
			locations.then(function (locations) {
				let markersMap = {};
				let center     = new google.maps.LatLng(34.1283951, -47.0535656);
				for (let key in locations) {
					let location   = locations[key];
					let point      = new google.maps.LatLng(
						parseFloat(location.lat),
						parseFloat(location.lng)
					);
					let title      = location.title;
					let id         = location.id;
					let type       = location.type;
					let content    = buildInfoWindowContent(location);
					let infoWindow = new google.maps.InfoWindow({content: content});
					let bounds     = new google.maps.LatLngBounds(point);
					let marker     = new google.maps.Marker({
						map: map,
						position: point,
						title: title,
						info: content,
						animation: google.maps.Animation.DROP,
						
						icon: {
							url: '/wp-content/themes/yout-theme/assets/default-pin.svg',
							scaledSize: new google.maps.Size(35, 35, 'px')
						},
						map_icon_label: '<span class="map-icon marker-' + type + '"></span>'
					});
					let markerID                       = "marker-" + id;
					markersMap[markerID]               = marker;
					markersMap[markerID]['infoWindow'] = infoWindow;
					markersMap[markerID]['bounds']     = bounds;
					markersMap[markerID]['point']      = point;
					google.maps.event.addListener(marker, 'click', function () {
						infoWindow.setContent(this.info);
						infoWindow.open(map, this);
						map.panToBounds(bounds);
						map.setZoom(8);
					});
					google.maps.event.addListener(infoWindow, 'closeclick', function () {
						resetMap();
					});
					google.maps.event.addListener(marker, 'mouseout', function () {
						stopAnimation(this);
					});

					google.maps.event.addListener( map, 'click',
						function(e){ console.log('clicked or dragged');} );
					google.maps.event.addListener( map, 'dragend', function(){
						google.maps.event.trigger(this, 'click');} );

					$(document).on('mouseover', '.location-title', function (e) {
						let markerID = $(this).data('marker-id');
						let marker   = markersMap["marker-" + markerID];
						toggleBounce(marker);
						marker['infoWindow'].setContent(marker.info);
						marker['infoWindow'].open(map, marker);
					});
					$(document).on('mouseout', '.location-title', function (e) {
						resetMap();
						for (let markerID in markersMap) {
							let marker = markersMap[markerID];
							stopAnimation(marker);
							marker['infoWindow'].close(marker);
						}
					});

					function resetMap() {
						map.setZoom(3);
						map.setCenter(center);
						bounds.extend(center);
					}

				}
			});
		} catch (error) {
			console.error(error);
		}
	}

	function buildInfoWindowContent(location) {
		let title = location.title;
		let id    = location.id;
		return "<div class='info-window' id='location-" + id + "'><p><strong>" + title + "</p></strong>" +
			   "<hr>" +
			   "<p>" + location.address + "<br>" +
			   location.city + ", " + location.state + ",<br> " +
			   location.zip + ", " + location.country +
			   "</p>" +
			   "<div class='btn-wrap'><a href='" + location.link + "' class='btn btn-solid btn-sm' title='" + title + "'>Read More</a></div>" +
			   "</div>";
	}


	function mapStyling() { //https://mapstyle.withgoogle.com/
		return [
			{
				"elementType": "geometry.fill",
				"stylers": [
					{
						"color": "#368cfa"
					},
					{
						"lightness": 90
					}
				]
			},
			{
				"elementType": "geometry.stroke",
				"stylers": [
					{
						"lightness": 100
					},
					{
						"weight": 0.5
					}
				]
			},
			{
				"elementType": "labels",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			},
			{
				"elementType": "labels.icon",
				"stylers": [
					{
						"saturation": -20
					},
					{
						"lightness": 70
					},
					{
						"visibility": "simplified"
					}
				]
			},
			{
				"elementType": "labels.text",
				"stylers": [
					{
						"color": "#9e9da4"
					},
					{
						"lightness": 5
					},
					{
						"visibility": "on"
					},
					{
						"weight": 0.5
					}
				]
			},
			{
				"elementType": "labels.text.fill",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			},
			{
				"featureType": "administrative",
				"elementType": "geometry",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			},
			{
				"featureType": "administrative.land_parcel",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			},
			{
				"featureType": "administrative.neighborhood",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			},
			{
				"featureType": "administrative.province",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			},
			{
				"featureType": "landscape.natural",
				"elementType": "geometry.fill",
				"stylers": [
					{
						"color": "#368cfa"
					},
					{
						"lightness": 70
					},
					{
						"visibility": "on"
					}
				]
			},
			{
				"featureType": "poi",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			},
			{
				"featureType": "poi.business",
				"elementType": "labels",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			},
			{
				"featureType": "road",
				"elementType": "labels.icon",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			},
			{
				"featureType": "road.arterial",
				"stylers": [
					{
						"visibility": "simplified"
					}
				]
			},
			{
				"featureType": "road.highway",
				"elementType": "labels",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			},
			{
				"featureType": "road.local",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			},
			{
				"featureType": "transit",
				"stylers": [
					{
						"visibility": "off"
					}
				]
			}
		]
	}

	function toggleBounce(marker) {
		if (marker.getAnimation() !== null) {
			marker.setAnimation(null);
		} else {
			marker.setAnimation(google.maps.Animation.BOUNCE);
		}
	}

	function stopAnimation(marker) {
		marker.setAnimation(null);
	}
})(jQuery);

rest-routes.php

<?php defined( 'ABSPATH' ) or die( 'No ' );


/** ============================================================= **/
add_action( 'rest_api_init', function () {

	$namespace = "yout-theme/v1";

	register_rest_route( $namespace, '/locations', array(
		'methods'  => 'GET',
		'callback' => function ( $request ) {

			$query = new Query;
			$locations_core = $query->get_taxonomy_query(  'locations' , array(
				'taxonomy' => 'category',
				'field' => 'slug',
				'terms' => 'core'
			))->get_posts();

			$fields = [];

			$keys = [
				 "ID",
				"post_title",
				"location_title",
				"location_bg",
				"location",
				"latitude",
				"longitude",
				'location_type',
				"street_address",
				"country",
				"city",
				"state",
				"zip_postal_code"
			];

			foreach($locations_core as $location){
				array_push($fields,
					array_intersect_key(   // filter the array keys provided
					array_merge(
						$location->to_array(), get_fields($location->ID)  // merge and pull in all custom fields
					),
						array_flip($keys)
					)
				);
			}

			$fields = array_map(function($item){
				   return array(
				   	 'id' => $item['ID'],
					   'title' => $item['post_title'],
					   'location_title' => ($item['location_title'] != null)?$item['location_title']: $item['post_title'],
					   'bkg_img' => $item['location_bg'],
					   'location' =>  $item['location'],
					   'link' => get_permalink($item['ID']),
					   'type' => ($item['location_type'])?$item['location_type']: 'center',
					   'lat' => $item['latitude'],
					   'lng' => $item['longitude'],
					   'address' => $item['street_address'],
					   'country' => $item['country'],
					   'city'=> $item['city'],
					   'state' => $item['state'],
					   'zip' => $item['zip_postal_code']
				   );
			},$fields);

			return $fields;
		}
	) );

});