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
?>

Google JavaScript Map using Advanced Custom Fields(ACF)

You need to create a Google Maps JavaScript API key here.

You also need to use ACF to create five fields:

1. api_key
2. marker_image (URL)
3. latitude
4. longitude
5. zoom

The API Key, Latitude and longitude are all required fields. The map will not render without them.

Just for guidance, the default marker size is 22px wide by 40px tall.

The Google Maps styling wizard is right here.

Tested and working perfectly as of 28th July 2016.

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.