SketchBookkeeper
5/21/2018 - 4:28 PM

Basic Google Map

Setup a basic map with a marker.

window.initMap = function() {
	const googleMap = document.getElementById('google-map');

	const location = {lat: 37.180662, lng: -113.330019}; // put business lat, lng here
	const mapStyles = [{
		featureType: "poi.business",
	}];

	const map = new google.maps.Map(googleMap, {
		zoom: 16,
		center: location,
		disableDefaultUI: true,
		styles: mapStyles,
	});

	const marker = new google.maps.Marker({
		position: location,
		map: map,
	});
};
	// Add this to base_theme_styles_and_scripts
	// Define page you need the map for in is_page
	// This way we are loading the script everywhere
	// The end of the enqueue string includes a callback to our fuction in map.js
	
	if ( is_page( 'contact' ) ) {
		wp_enqueue_script( 'google-maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCVfQzeQwpAik9QGUqam6GDI179D4zzWos&callback=initMap', array(), null, true );
	}