Stylish Google map show with dynamic field feature of ACF and also with multiple location pointers and pointer information.

googlemap.php

<?php
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=<?php the_field('gmap_api_key', 'option'); ?>"></script>
<style type="text/css">
#map {
    width: 100%;
    height: 600px;
}
</style>

<script type="text/javascript">
(function( $ ) {	
function initMap() {
	var locations = [
		<?php while ( have_rows('locations') ) : the_row(); 
			$location = get_sub_field('locaion_in_google_map', 4457);
			$title = get_sub_field('location_name', 4457);
			$location_address = get_sub_field('address', 4457);
			$contact_custom_number = get_sub_field('contact_number', 4457);
			$email_custom_id = get_sub_field('email_id', 4457);
			$website_custom_url = get_sub_field('website', 4457);
			?>
			["<?php echo esc_html( $title ); ?>",
			 "<?php echo esc_attr($location['lat']); ?>",
			 "<?php echo esc_attr($location['lng']); ?>",
			 "<?php if($location_address){echo '<strong>Address:</strong> '.$location_address;} else{ echo '';} ?>",
			 "<?php if($contact_custom_number){echo '<strong>Contact Number:</strong> '.$contact_custom_number;} else{ echo '';} ?>",
			 '<?php 
			 if($email_custom_id){
			 	echo '<strong>Email ID:</strong> <a href="mailto:'.$email_custom_id.'">'.$email_custom_id.'</a>';
			 } 
			 else{ echo ""; } ?>',
			 '<?php 
			 if($website_custom_url){
			 	echo '<strong>Website:</strong> <a href="'.$website_custom_url.'" target="_blank">'.$website_custom_url.'</a>';
			 } 
			 else{ echo ""; } ?>',
			],
		<?php endwhile; ?>
	];
	
	var bounds = new google.maps.LatLngBounds();
	var count, marker;

	// Init map
	var mapOptions = {
		center: new google.maps.LatLng(0, 0),
		zoom: 0,
		minZoom: 5, 
    	maxZoom: 15,
		scrollwheel: false,
		styles: [{
					"featureType": "administrative",
					"elementType": "all",
					"stylers": [
						{
							"saturation": "-100"
						}
					]
				},
				{
					"featureType": "administrative.province",
					"elementType": "all",
					"stylers": [
						{
							"visibility": "off"
						}
					]
				},
				{
					"featureType": "landscape",
					"elementType": "all",
					"stylers": [
						{
							"saturation": -100
						},
						{
							"lightness": 65
						},
						{
							"visibility": "on"
						}
					]
				},
				{
					"featureType": "poi",
					"elementType": "all",
					"stylers": [
						{
							"saturation": -100
						},
						{
							"lightness": "50"
						},
						{
							"visibility": "simplified"
						}
					]
				},
				{
					"featureType": "road",
					"elementType": "all",
					"stylers": [
						{
							"saturation": "-100"
						}
					]
				},
				{
					"featureType": "road.highway",
					"elementType": "all",
					"stylers": [
						{
							"visibility": "simplified"
						}
					]
				},
				{
					"featureType": "road.arterial",
					"elementType": "all",
					"stylers": [
						{
							"lightness": "30"
						}
					]
				},
				{
					"featureType": "road.local",
					"elementType": "all",
					"stylers": [
						{
							"lightness": "40"
						}
					]
				},
				{
					"featureType": "transit",
					"elementType": "all",
					"stylers": [
						{
							"saturation": -100
						},
						{
							"visibility": "simplified"
						}
					]
				},
				{
					"featureType": "water",
					"elementType": "geometry",
					"stylers": [
						{
							"hue": "#ffff00"
						},
						{
							"lightness": -25
						},
						{
							"saturation": -97
						}
					]
				},
				{
					"featureType": "water",
					"elementType": "labels",
					"stylers": [
						{
							"lightness": -25
						},
						{
							"saturation": -100
						}
					]
				}
			]
	};

	var map = new google.maps.Map(document.getElementById("map"), mapOptions);

	// Create info window
	var infowindow = new google.maps.InfoWindow({
		maxWidth: 350,
		pixelOffset: new google.maps.Size(2,-30)
	});

	var infoFn = function (count) {
		return function (e) {
				 var content = '<div>' +
                    '<span><h4><strong>' + locations[count][0] + '</h4></strong></span>' +
                    //'<span>, Lat: ' + locations[count][1] + '</span>' +
                    //'<span>, Long: ' + locations[count][2] + '</span>' +
                    '<p>' + locations[count][3] + '</p>' +
                    '<p>' + locations[count][4] + '</p>' +
                    '<p>' + locations[count][5] + '</p>' +
                    '<p>' + locations[count][6] + '</p>' +
                    '</div>';
				'</div>';

			infowindow.setContent(content);
			infowindow.open(map);
			infowindow.setPosition(new google.maps.LatLng(locations[count][1], locations[count][2]));
		}
	};
	
	const image = {
		url: '<?php echo get_stylesheet_directory_uri(); ?>' + '/images/pointer.png',
		labelOrigin: new google.maps.Point(170, 20),
		size: new google.maps.Size(32, 40),
		origin: new google.maps.Point(0, 0),
		anchor: new google.maps.Point(11, 40),
	};
	
	// Add markers
	for (count = 0; count < locations.length; count++) {
		position = new google.maps.LatLng(locations[count][1], locations[count][2]);
		marker = new google.maps.Marker({
			//position: new google.maps.LatLng(locations[count][1], locations[count][2]),
			position: position,
			map: map,
			icon: image,
			title: locations[count][0]
		});
		marker.setMap(map);
		bounds.extend(position);

		let fn = infoFn(count);
		google.maps.event.addListener(marker, 'click', fn);
	}
	map.fitBounds(bounds);
  	map.panToBounds(bounds);
}
initMap();
})(jQuery);
</script>