Wordpress | ACF | Google JavaScript Custom Map

map.php

<style>
div#map {width: 100%; height: 40vh}
</style>
<?php
if ( is_page( 'Contact' ) ) {
    $api_key = get_field('api_key');
    $marker = get_field('marker_image');
    $latitude = get_field('latitude');
    $longitude = get_field('longitude');
    $zoom = get_field('zoom');
    if ( $api_key && $latitude && $longitude ) { ?>
    <div id="map"></div>
    <script>
      function initMap() {
        // Styles a map in silver mode.
        var yourplace = {lat: <?php echo $latitude; ?>, lng: <?php echo $longitude; ?>};
        var map = new google.maps.Map(document.getElementById('map'), {
          center: yourplace,
          scrollwheel: false,
          <?php
          // The higher the number the closer the zoom
          if ( $zoom ) {
              echo 'zoom: ' . $zoom . ',' . PHP_EOL;
          } else {
              echo 'zoom: 12,';
          }
          echo 'draggable: false,' . PHP_EOL; // This is in place for mobile devices if you are using mobile-detect wrap it in a if $mobile query
          // Next up the map styling, use the Google Map Style generator
          ?>
          styles: [{
            "elementType": "geometry",
            "stylers": [{
              "color": "#f5f5f5"
            }]
          }, {
            "elementType": "labels.icon",
            "stylers": [{
              "visibility": "off"
            }]
          }, {
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#616161"
            }]
          }, {
            "elementType": "labels.text.stroke",
            "stylers": [{
              "color": "#f5f5f5"
            }]
          }, {
            "featureType": "administrative.land_parcel",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#bdbdbd"
            }]
          }, {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": [{
              "color": "#eeeeee"
            }]
          }, {
            "featureType": "poi",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#757575"
            }]
          }, {
            "featureType": "poi.park",
            "elementType": "geometry",
            "stylers": [{
              "color": "#e5e5e5"
            }]
          }, {
            "featureType": "poi.park",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#9e9e9e"
            }]
          }, {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": [{
              "color": "#ffffff"
            }]
          }, {
            "featureType": "road.arterial",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#757575"
            }]
          }, {
            "featureType": "road.highway",
            "elementType": "geometry",
            "stylers": [{
              "color": "#dadada"
            }]
          }, {
            "featureType": "road.highway",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#616161"
            }]
          }, {
            "featureType": "road.local",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#9e9e9e"
            }]
          }, {
            "featureType": "transit.line",
            "elementType": "geometry",
            "stylers": [{
              "color": "#e5e5e5"
            }]
          }, {
            "featureType": "transit.station",
            "elementType": "geometry",
            "stylers": [{
              "color": "#eeeeee"
            }]
          }, {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [{
              "color": "#c9c9c9"
            }]
          }, {
            "featureType": "water",
            "elementType": "labels.text.fill",
            "stylers": [{
              "color": "#9e9e9e"
            }]
          }]
        });
        <?php if ( $marker) { ?>
        var marker = new google.maps.Marker({
            position: yourplace,
            map: map,
            icon: "<?php echo $marker; ?>"
        });
        <?php } ?>
      }
    </script>
    <?php 
    echo '<script src="https://maps.googleapis.com/maps/api/js?key=' . $api_key . '&callback=initMap" async defer></script>';
    } // Close IF api + lat + long.
} // Close if contact page
?>

Tested and working on 7th Jan 2017

Completely updated in July 2017. Now incorporates map styling and, in this example, uses the grayscale Silver theme.