1. Code
  2. Creative Coding

Give Your Customers Driving Directions With the Google Maps API

Read Time:12 minsLanguages:

Instead of just showing your business location on a Google Map, why not offer your users the opportunity to get driving directions on the same page? No need for them to open up a new browser window and find it themselves, we can do better than that!

Using the Google Maps API within your WordPress website is a relatively simple process and we'll explore exactly how to do it in this tutorial.

What We'll Be Doing in This Tutorial...

  1. First we'll set up some custom options so that we can enter information about our map in the WordPress Admin panel.
  2. Then we'll use shortcodes to output a map container, input fields and directions container
  3. Finally we'll write some JavaScript to initiate the Google Map

Note: We'll be writing a fair bit of JavaScript here, but don't worry! This is a WordPress tutorial so feel free to gloss over the JavaScript parts :)

Step 1 Create the Directory and Files

  1. Create a folder inside your theme called Map
  2. Inside this folder, create map.php
  3. Finally create map.js

Step 2 Include the map.php File

In your functions.php file (located in the root directory of your theme) – include the map.php file you created at the top.

Step 3 Register Settings

There are 3 things that we want to be able to edit from the Admin area.

  1. The Destination. We're going to use Longitude and Latitude values to specify the precise location of your destination (more details to follow)
  2. The infoWindow content. This is the white bubble you often see on Google Maps – we want to be able to edit the text in the bubble!
  3. Initial Zoom Level of the map – how far the map is zoomed in when the user first loads the page.

In map.php, hook into admin_init to register our settings:

Now we can set up the heading text for our section in the options page and all of the inputs we need.

Finally we hook into admin_menu to display our settings in the WordPress Admin:

Go into your admin area, you should now see this:

Step 4 Enter Your Destination, infoWindow Text and Zoom Level

  1. Destination Address

    The Google Maps API actually accepts regular addresses such as 'Newgate Lane, Mansfield, Nottinghamshire, UK' – However, you'll find that you will want to be more precise with your destination (for example, you'll most likely want to point directly to your business and not just the street). You can use a Google Maps API V3 Sample to search for your destination. Drag the target around until you have pin-pointed your spot. When you're happy, copy the Lat/Lng: value into the address field in the options – for example 27.52774434830308, 42.18752500000007 (just the numbers separated by the comma, no brackets or quotes!)

  2. InfoWindow Text

    Make this whatever you want. Your Business Name would be a good idea :)

  3. Zoom Level

    A good starting point is 10.

Click 'Save Changes' and when the page refreshes you can check that the info has been stored. It should look something like this now:

Step 5 Set Up the Shortcodes

When we are finished, we'll have 3 elements: the Map, the Form, and the Directions – so in this tutorial I've decided to split them up into 3 separate shortcodes. This will allow us to change the order/placement of each item without having to modify any of our PHP code. For example, you may decide to have your directions above the map instead of below, or at the side, etc.

  1. Shortcode 1 : wpmap_map

    Here we register and enqueue the Google Maps API JavasScript file as well as our own maps.js file.

    Next we use the $output variable to store our map-container div along with some custom data attributes. ( data-map-infowindow will store the content for the infowindow and data-map-zoom will represent the initial zoom level – both of these values are returned using WordPress's get_option function).

    Finally we return the generated HTML to be output:

  2. Shortcode 2 : wpmap_directions_container

    Here we simply return an empty div with an ID of dir-container. This will act as the container for the directions.

  3. Shortcode 3 : wpmap_directions_input

    This generates the Markup needed for our form.

    This is also where we'll set our final custom option – the destination Address. This time, we'll use a hidden form field to hold the Latitude/Longitude value that we entered earlier in the Admin Panel.

Now we have the shortcodes set up, you can go ahead and type them into your Contact Us page (or any page you like).

If you preview the page now, all you'll see is the form input fields. That's because we haven't written our JavaScript that will initialize the Map yet and the div for the directions is currently empty.

Note: Before we dive into the JavaScript, we just need to add this to our style.css:

Step 7 Writing JavaScript to Interact With Google Maps API

Now it's time to make the magic happen! I'll provide a quick run-down of what we're going to do first, then we'll dig straight into the code.

  1. First we're going to create an object WMmap and assign properties to it (some of which we'll be grabbing from the markup that we created in the shortcodes)
  2. Then we'll add a few methods to handle the functionality of the map and directions.
  3. One of these methods, init, will be responsible for loading the map and also for setting some default values such as the infoWindow text, zoom level and initial marker position (all from WordPress options)
  4. Finally we'll set an event listener to load our map when the page is ready.


I'll explain each part of the code step-by-step, but don't worry if you get lost, we'll put it all together at the end.

Set Properties

Let's create our object and set some properties. Here we are simply querying the DOM to retrieve the HTML elements that contain the values we need. The property names we're using should be very clear and self-explanatory (mapContainer is obviously the Map Container, etc :))

Here we also get a couple of objects from the API that we'll use later when we deal with Directions.

The Methods

These are also part of our WPmap object, if you are unsure how everything ties together, be sure to check out the bottom of this tutorial to see all of the code together.


This is called from within another method that we'll see later, it basically controls the insertion of the directions into the page.


This is called once from our init method. It will set the startLatLng property equal to a google.maps.LatLng object that we can use later. It requires that we provide it separate Latitude and Longitude values – how can we do this?

  1. In our shortcode we inserted a hidden form field that contains the Latitude & Longitude value that we set in the WordPress Admin. Then we retrieved the hidden form field and stored it in toInput. This means we can now access the value using WPmap.toInput.value
  2. However, the value we set in the form is just a string with a comma separating the numbers. To separate the values we can split the string up using .split(","). This will return an array containing the Latitude and Longitude as separate values.
  3. Now we can access each one by using the arrays index.


Because we have allowed our users to select whether they would prefer directions in Metric or Imperial, we use this method to set DirectionsUnitSystem to either METRIC or IMPERIAL.


This is the method that is called when the user clicks the Get Directions button.

  1. First we get the address that the user entered and store it in the fromStr variable.
  2. Next we set up an options object – dirRequest. This will contain the options needed to provide the Driving Directions.
    1. origin – The address that the user entered.
    2. destination – The google.maps.LatLng object containing the Latitude and Longitude values of your destination.
    3. travelMode – Here we ensure we are only retrieving Driving Directions.
    4. unitSystem – Specify which unit of measurement to use based on user's choice.
  3. Finally, we call WPmap.dirService.route – and pass two parameters to it:
    1. dirRequest – this is the object containing our options.
    2. WPmap.showDirections – the callback function that handles the placement of the directions into the page.


This is the method that is called when the page is loaded. It is responsible for :

  1. Initiating the map, centered on your address.
  2. Retrieving values that are needed to set the infoWindow text and the initial Zoom level.
  3. Setting a marker pin showing your address.
  4. Listening for when when a user clicks 'Get Directions' so that it can remove the initial Marker and infoWindow

** Optional **

If you want to display a nice message (like the one seen below) to your users after they have requested directions, just copy the code under the image into the event listener inside the init method.

Optional Thank you message:

Step 8 Add the Event Listener That Will Load the Map

Are you still with me? We've made it all the way to end now and all that's left to do is call the WPmap.init() method when the page loads. Add this to the bottom of map.js

Putting All the JavaScript Together

We've covered a lot of ground here, so let's see how it looks when it's all put together.

Tutorial Notes

  1. Be sure to research anything you don't understand on Google's Maps API Website
  2. When writing this tutorial, I was testing my code using the stock TwentyEleven WordPress Theme. Something was causing the arrow at the bottom of the InfoWindow on the map to display incorrectly. It's because .entry-content img on line 857 has a max-width set. This screws up the way that Google renders the infoWindow. To fix it, enter this somewhere below it:

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.