How to build a custom Google map for your website

Tags: , , &

Google Maps has emerged as an enormously helpful tool for users and a powerful tool for designers and developers. Adding a dynamic map to your website is super simple with the embeddable <iframe>, unfortunately this leaves us with limited control over aesthetics and functionality.

Adding an interactive map with a more bespoke feel can mean digging through Google’s gargantuan JavaScript API for hours. Fortunately, we found a quicker way to deal with it. So we’ve made a short tutorial to help you get a customised Google map up on your site in minutes.

We’ve also built a lightweight WordPress plugin to help you sort it out even faster.

Step 1: Sign in with your Google account and go to https://code.google.com/apis/console. Click on Services and scroll down until you find the Google Maps APIs:

Google Maps API in developer services.

Step 2: Switch Google Maps JavaScript API v3 to ON.

Step 3: Grab your API key from the API Access page

Google maps JavaScript API access screenshot

Step 4: Add the Google maps script to your site:

Manually:

Add this script tag at the bottom of the document (before the closing </body> tag)

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true"></script>

WordPress themes:

In functions.php

wp_register_script('google-maps-api', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true', array(), '3.15', true);

add_action('wp_enqueue_scripts', 'enqueue_assets');

function enqueue_assets() {
    wp_enqueue_script('google-maps-api');
}

Step 5: Create a custom JavaScript file to put your own scripts in, (I’m going to call mine main.js) and save it wherever your scripts are stored.

Step 6: Grab a map theme and some code from Snazzy maps

Head on over to Snazzy maps and find a theme you like. For this example, I’m going to use Pale Dawn.

pale dawn google map theme by adam krogh

Pale Dawn by Adam Krogh

Step 7: Following the Snazzy Maps instructions, copy the code into your main.js

Step 8: Add the #map element where you want the map to display, as a fallback for older browsers, I recommend including a static image as a fallback inside the map container (which will be automatically hidden once the dynamic map loads).

<div id="map">
    <img src="http://maps.googleapis.com/maps/api/staticmap?center=108+The+Terrace,Wellington,New+Zealand&zoom=14&size=600x300&markers=color:red|108+The+Terrace,Wellington,New+Zealand&sensor=true" alt="Static fallback image showing the location of 108 The Terrace, Wellington" width="600" height="300" />
</div>

Step 9: Add some CSS

html, body, #map {
 height: 100%;
 margin: 0px;
 padding: 0px
}

/* Limit the height to 300px */
#map {
 height: 300px;
}

Step 10: Add some basic dynamic elements with gmaps.js. Head over to the gmaps website and download gmaps.js

google maps api with less pain and more fun

Step 11: Hook gmaps.js into your website, just after the Google Maps JS API and before main.js.

Step 12: To show just how easy it is to add dynamic content with gmaps, we’ll add a marker to show with some information about the company that shows up on click.

Step 13: Switch out some of the Google maps code with gmaps code:

// File: /scripts/main.js

// ...

// We can comment out this line:
// center: new google.maps.LatLng(-41.2831354,174.7748761),

// ... 

// This line can be also commented out:
// var map = new google.maps.Map(document.getElementById('map'), myOptions);

// The gmaps code:

// I got our company's latitude and longitude from:
// http://itouchmap.com/latlong.html
var companyLat = -41.2831354,
    companyLng = 174.7748761,
    map = new GMaps({
        div: '#map',
        lat: companyLat,
        lng: companyLng,
        options: myOptions
    });

    // Add a marker easily with gmaps addMarker() method
    // We'll also add some custom text which will show up in a pop-up
    // when the marker is clicked
    map.addMarker({
        lat: companyLat,
        lng: companyLng,
        title: 'Zing Design',
        infoWindow: {
            content: '<strong>Zing Design<strong><br/>We make beautiful websites here'
        }
    });

Here’s one we made earlier:

Step 15: Experiment and explore! There’s a lot more complicated stuff you can achieve with the Google Maps API and gmaps makes playing with the API a lot more fun and easy. Check out the gmaps examples for inspiration. Use the Snazzy Maps style array as a template for building your own theme, swap out colours and see what looks good.

Still stuck?

Don’t worry, we’ve built a simple WordPress plugin for quickly adding a custom Google Map to your website.

DownloadGithub

People who have viewed this post also viewed

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text