Quick start instructions for setting up a Google Map in WordPress with the JavaScript API.

Google Map (WordPress).md

1. Get a Key for the JavaScript API

Visit the documentation and follow the instructions.

2. Include the JavaScript API

• Copy your API key, and add the following snippet to your functions.php.
  • Replace YOUR_API_KEY with your key you copied.

wp_enqueue_script('gmaps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', array(), NULL, true );

3. Create the Map

• Add the following snippet to your main JavaScript file.
  • Replace LATITUDE and LONGITUDE with their respective values.
  • Replace LOCATION_NAME with the title for your marker
• Adjust the mapOptions to your liking
• Additional map styles can be found on Snazzy Maps

var setupMap = function() {
    // Set the latitude/longitude
    var latLng = new google.maps.LatLng(LATITUDE, LONGITUDE);

    // Set the map style
    var mapStyle = [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}];

    // Set the map options
    var mapOptions = {
        zoom: 18,
        center: latLng,
        disableDefaultUI: true,
        disableDoubleClickZoom: true,
        draggable: false,
        scrollwheel: false,
        panControl: false,
        styles: mapStyle
    };

    // Create the map
    var map = new google.maps.Map(document.getElementById('section--map'), mapOptions);

    // Create the marker
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: 'LOCATION_NAME'
    });
}

// Initialize the map
if( document.getElementById('section--map') ) {
    setupMap();
}

4. Display the Map

Add the following snippet in your HTML wherever you want the map to show up.

<section id="section--map" class="section--map"></section>

5. Style the Map

Add the following snippet to your stylesheet (Sass) or add whatever styling you would like.

.section--map {
    min-height: 500px
}