ACF Google map with styles

map.php

<?php $location = get_field('location'); if( !empty($location) ): ?>
	<div class="acf-map" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;">
		<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
	</div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
(function(e){function t(t){
	var i=t.find(".marker");
	
	// Styling the map to give it colours / branding
	var styles = [
	  {
	    stylers: [
		  { hue: "#ff0000" }, // This is the base colour for everything
		  { saturation:-100 }, // This takes all the colour out
		  { lightness: -89 }, // This dulls the map down to not be seen
		  { gamma: 1.38 } // This is the contrast (Gamma)
	    ]
	  },{ // Remove all complex lines from roads
	    featureType: "road",
	    elementType: "geometry",
	    stylers: [
	      { lightness: 1 }, // Make the roads darkest
	      { visibility: "simplified" } // Simplify the roads
	    ]
	  },{ // Remove street and road names
	    featureType: "road",
	    elementType: "labels",
	    stylers: [
	      { visibility: "off" } // No longer visible
	    ]
	  },{ // Remove all the points of interests off the map
	    featureType: "poi",
	    elementType: "labels",
	    stylers: [
	      { visibility: "off" } // No longer visible
	    ]
	  }
	
	];
	
	// Options for the Map itself
	var s={
		zoom:16,	//Default Zoom
		draggable: false, // Stops all that dragging shit
		zoomControl: false, // No zooming either
		scrollwheel: false, // And no scrolling
		disableDoubleClickZoom: true, // No double clicking
		disableDefaultUI: true, // Remove the controls in the top of the map
		center:new google.maps.LatLng(0,0), // Center the map somewhere
		styles: styles, // Get the styles defined at the top into here
		mapTypeId:google.maps.MapTypeId.ROADMAP
	};
	
	// This part pulls the LON, LAT from the data of the target
	var o=new google.maps.Map(t[0],s);o.markers=[];i.each(function(){n(e(this),o)});r(o)}function n(e,t){var n=new google.maps.LatLng(e.attr("data-lat"),e.attr("data-lng"));

	// Data:image as an icon. I used this: http://webcodertools.com/imagetobase64converter/Create
	var point = {
	        url: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI4MHB4IiBoZWlnaHQ9IjcwcHgiIHZpZXdCb3g9IjAgMCA4MCA3MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgODAgNzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNNzAsMEgxMEgwdjEwdjM1djEwaDEwaDIwbDEwLDE1bDEwLTE1aDIwaDEwVjQ1VjEwVjBINzB6IE02OC4zMDgsNDIuMTM5SDExLjg1NnYtNC4wMTINCgkJbDM5LjY0OC0xOS42NjlIMTN2LTUuMjg2aDU0LjU4djMuOTczTDI2LjMzLDM3LjM0OWg0MS45NzhWNDIuMTM5eiIvPg0KCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiNFMjIzMUE7IiBwb2ludHM9IjY3LjU4LDE3LjE0NCA2Ny41OCwxMy4xNzEgMTMsMTMuMTcxIDEzLDE4LjQ1OCA1MS41MDQsMTguNDU4IDExLjg1NiwzOC4xMjcgMTEuODU2LDQyLjEzOSANCgkJNjguMzA4LDQyLjEzOSA2OC4zMDgsMzcuMzQ5IDI2LjMzLDM3LjM0OSAJIi8+DQo8L2c+DQo8L3N2Zz4NCg==',
	        size: new google.maps.Size(80, 70),
	        origin: new google.maps.Point(0, 0),
	        anchor: new google.maps.Point(80/2, 0)
	};

	// Alternatively, This is an SVG as a pointer. Sick as fuck right?
	/*
		var point = {
			path: 'M70,0H10H0v10v35v10h10h20l10,15l10-15h20h10V45V10V0H70z M68.308,42.139H11.856v-4.012 l39.648-19.669H13v-5.286h54.58v3.973L26.33,37.349h41.978V42.139z', 
			fillColor: '#ffffff', 
			fillOpacity: 1, 
			scale: 0.8, 
			strokeWeight: 0
		};
	*/

	// This is all standard shit from here onwards, don't really need to touch anything after this point.
	var r=new google.maps.Marker({position:n,map:t,icon:point});t.markers.push(r);if(e.html()){var i=new google.maps.InfoWindow({content:e.html()});google.maps.event.addListener(r,"click",function(){i.open(t,r)})}}function r(t){var n=new google.maps.LatLngBounds;e.each(t.markers,function(e,t){var r=new google.maps.LatLng(t.position.lat(),t.position.lng());n.extend(r)});if(t.markers.length==1){t.setCenter(n.getCenter());t.setZoom(16)}else{t.fitBounds(n)}}e(document).ready(function(){e(".acf-map").each(function(){t(e(this))})})})(jQuery)
</script>
<?php endif; ?>