Drop Multiple Pin Colors on Google Maps and ACF

functions.php

//Register for a Google Maps JS API key
//Make an ACF Field in options called 'api_key'.

  if ( is_page_template( 'page-locations-single-map.php' ) ) { // Template Name

		$api_key = get_option( 'options_api_key', '' );

		$api_src = add_query_arg( 'key', $api_key, '//maps.googleapis.com/maps/api/js' );

		wp_enqueue_script(
			'mmt-googlemaps-api',
			$api_src,
			array( 'jquery' )
		);
	};

page-whatever-template.php

<?php
	$args = array(
		'orderby'        => 'menu_order',
		'order'          => 'ASC',
		'post_type'      => 'locations', // Your ACF Google Maps Field Name
		'post_status'    => 'publish',
		'posts_per_page' => - 1,
	);

	$locations     = get_posts( $args );
?>

<script>

	function initialize() {
		var map;
		var bounds = new google.maps.LatLngBounds();
		var mapOptions = {
		mapTypeId: 'roadmap'
	};

	// Display a map on the page
	map = new google.maps.Map(document.getElementById("location_map_canvas"), mapOptions);
	map.setTilt(45);

	// Multiple Markers
	var markers = [

	<?php foreach ( $locations as $post ) : // Loops through ACF Google Maps Field and gets LAT + LNG
		setup_postdata( $post );
		$location_coordinates = get_field( 'location_coordinates' );
		$loc_lat = $location_coordinates['lat'];
		$loc_lng = $location_coordinates['lng'];
	?>
	
	// Forces a pin color, incase field name was added after CPT was created
	<?php if ( 'red' === get_field( 'pin_color' ) ) : ?>
		<?php $map_pin = 'red'; ?>
	<?php else : ?>
		<?php $map_pin = 'green'; ?>
	<?php endif;?>

	// Outputs in this format - ['color', lat,long ],
	['<?php echo $map_pin;?>','<?php echo $loc_lat ;?>','<?php echo $loc_lng ;?>'],

	<?php endforeach;
		wp_reset_postdata();
	?>

	];

	// Info Window Content
	var infoWindowContent = [

	<?php foreach ( $locations as $post ) : setup_postdata( $post ); ?>

		['<div>' +
		'<h3>Title</h3>' +
		'<p>Description.</p>' + 
		'</div>'
		],

	<?php endforeach;
		wp_reset_postdata();
	?>

	];

	// Display multiple markers on a map
	var infoWindow = new google.maps.InfoWindow(), marker, i;


	// Loop through our array of markers & place each one on the map
	for( i = 0; i < markers.length; i++ ) {
	var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
	var mapPin = markers[i][0];

	// Load your own PNGs for the markers
	if ( mapPin == 'red' ) {
		var customPin = '/path-to-image/pin-icon-red.png';
	} else {
		var customPin = '/path-to-image/pin-icon-green.png';
	}

	bounds.extend(position);
	marker = new google.maps.Marker({
		position: position,
		map: map,
		icon: customPin 
	});

	// Allow each marker to have an info window
	google.maps.event.addListener(marker, 'click', (function(marker, i) {
		return function() {
			infoWindow.setContent(infoWindowContent[i][0]);
			infoWindow.open(map, marker);
		}
	})(marker, i));

	// Automatically center the map fitting all markers on the screen
	map.fitBounds(bounds);
	}

	//Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
	//var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
	//this.setZoom(5);
	//google.maps.event.removeListener(boundsListener);
	//});

	}
	
	jQuery( document ).ready(function() {
		initialize();
	});
	
</script>

<!-- Places Map On Page -->
<div id="location_map_wrapper">
	<div id="location_map_canvas" class="mapping"></div>
</div>

style.css

#location_map_wrapper {
    height: 500px;
    margin: 50px 0;
}
#location_map_canvas {
    width: 100%;
    height: 100%;
}