How to integrate Google Maps into your site

December 19, 2015

Overview

At one point or another you’ve probably wanted to add interactive Google maps to your site. Whether it be for directions to your office, the location of an event or to display locations in the area, such as restaurants. Whatever the case may be, I’m going to walk you through the process of adding a Google Map to your site, the correct way. The WordPress way. This should be helpful to anyone building out custom themes for clients or for your own personal use.

Getting Started

Before we get started, it may help to get a better understanding of what we’ll actually be doing – and the steps that need to be taken to achieve the look we’re after. We are going to be generating the HTML markup and enqueueing the necessary JavaScript files required to initialize a map on your site. We’ll walk through each step together to get a better understanding of how to properly load the files on your WordPress site.

There are going to be five main sections to this tutorial, each step building on top of the previous one. In the first section, we’ll initialize a simple Google Map. In the second section, we’ll add a visual indicator to the map on our location. In the third section, we’ll take it one step further and display an information box above the map marker when it’s clicked. In the fourth section, we’re going to populate a single map with multiple markers. And finally in the fifth section, we’ll wrap up our tutorial with how to use our own custom map markers, instead of the default one provided by google. In a bonus section at the end of our tutorial, we’ll walk through how to use Snazzy Maps to add custom styles to our maps and give them a bit more personality.

Let’s begin!

Section 1) Initializing a Simple Google Map

Note: This is the longest section, as it requires us to load the required JavaScript files and place the necessary HTML on our site. Once this section is complete, the majority of changes to our Google Map will be done in a single JavaScript file.

Step 1: Add the HTML

map-html-in-widget

The first thing we’ll need to do is add an HTML element on the page that will be used to display our map in. This is the element that our JavaScript file is going to look for, and initialize the Google Map on. The easiest way to do this, is to add the following to a ‘Text’ widget. This way our map can be displayed in a sidebar, the footer or any other widgetized area of our site. But the following HTML code can also be used in posts, pages or in theme template files.

Ideally you’ll want to add the height declaration into the style.css file of your active theme, but for brevity I added the styles inline on our map element.

Map HTML Markup
<div id="map" style="height:350px;"></div>

Step 2: Load the JavaScript file

To begin, we’ll need to enqueue the required JavaScript file from the Google CDN. When we enqueue a file in WordPress, we’re telling WordPress to load the file on our site, in the appropriate location (header or footer).

Depending on where the map will be displayed on your site, you can alter the follow function to your needs with conditional statements. In this tutorial, I’m going to assume that the map will be displayed in the footer of your site, thus we’ll have to load the required JavaScript file on every page of our site.

The following function can be added to the bottom of the functions.php file of your active theme.

Once added, go ahead and save the functions.php file.

Step 3: Create a custom JavaScript File

Now we’ll need to create a JavaScript file which will house all of our Google Maps settings. This can reside in the root of your theme inside of a ‘js’ directory. (eg: wp-content/themes/theme-name/js/).

Remember to give this file an appropriate name so in future we know what this script does. I’m going to name it google-maps-init.js, and place it in the directory path mentioned above.

Inside of the new JavaScript file, google-maps-init.js, we’ll first just write an alert. This way when the file gets loaded in the browser, an alert will trigger, and we’ll know that our JavaScript file has loaded properly. Add the following to your JavaScript file, and save it.

Now we’ll need to enqueue the JavaScript file we just created after our Google Maps script, from the previous step. Building onto the function above, you’ll want to enqueue the JavaScript file we just created like so:

You’ll notice that in the new line of our function, we’re passing in a third parameter, an array. The third parameter let’s WordPress know that we want to load google-maps-init after the google-maps-api script has fully loaded. This ensure that when we go to initialize the map, the Google Maps JavaScript file exists and all of the functions we’ll need are there and available to use.

Once you’ve updated the the function inside of functions.php, go ahead and refresh your site. You should see an alert box popup stating ‘google-maps-init.js is ready’. Now we’re ready to initialize the map.

Step 4: Initialize the Map

Now that we’ve generated the necessary HTML on our site, and loaded the required JavaScript files in the order we need – we’re ready to initialize the map.

Inside of the custom JavaScript file, google-maps-init.js, we can delete the alert since we now know our file is loaded properly on our site. After deleting the alert, we can now add the following to our .js file:

The first thing you’ll notice is that we’re passing in Latitude and Longitude values to the center argument, which will be our location. Google Maps uses the latitude and longitude values to pin point a location on a map. You may be wondering ‘How do I find those values for my location?‘. Well, there are a number of ways, but the easiest and quickest that I’ve found is using the Latitude and Longitude lookup tool.

You can quickly find locations by address and copy and paste the values into the JavaScript function above, inside of our google-maps-init.js file.

You’ll also notice the zoom argument passed into the initialization function. This allows us to set a default zoom value. The possible values range from 0-18, 0 being completely zoomed out and 18 being zoomed in as close as possible.

You can now save the file, and refresh your site. You should now be seeing a fully initialized Map of your location in the sidebar or footer of your site (depending on where you added the HTML from step 1).

Section 2) Adding a Marker to Our Map

Now that we have a working Google Map on our site, the next step most people will want to take is to add a marker to the map. The marker is a simple visual indicator, representing our location. But we can add additional features to the marker, so that when it’s clicked – details about the location display in a small window above the marker. Let’s go ahead and do that. We’ll be working inside google-maps-init.js, created in the section above. First we’ll add our map marker. Our new google-maps-init.js will look like:

Our new section is now prefaced with the comment ‘Map Marker’. The first argument for our marker is the position of the marker. This is going to be the exact same value as the center argument in our Google Maps init function above. This ensures that our marker displays on top of our set location. The next parameter, map, we simply pass in the map object created above. This allows us to specify which map on our site we want the marker displayed on. For this tutorial, we only have one map so it’s pretty straight forward. The title argument is the text that displays on marker hover. This is the same as the title attribute on an anchor tag. Finally, I’ve added an animation argument. This is optional, but add’s a nice subtle touch to the map. When the map is generated and displays, the map marker will animate so it looks like it’s ‘dropping’ onto the map.

After you’ve made alterations to the map marker for your specific implementation, you can save the google-maps-init.js file and refresh your site. You should now see the map marker displayed on your map. If you hover on the marker for a second or two, you’ll see the text in our title display.

Section 3) Adding an Info Box Above the Marker

In this section we’re going to add a small popup above the marker with some additional details about our location. We’ll alter google-maps-init.js to reflect the following:

This is the YIKES Inc. main offices, located in the beautiful Fishtown section of Philadelphia, PA.

‘, }); // Map Marker var marker = new google.maps.Marker({ position: {lat: 39.968887, lng: -75.133297}, map: map, title: ‘YIKES Inc.’, animation: google.maps.Animation.DROP }); // Add event listener for the Info Box marker.addListener(‘click’, function() { infowindow.open(map, marker); }); });

We’ve gone ahead and added two additional sections to our JavaScript file. The first is commented with ‘Info Box Content’, and the second with ‘Add event listener…’. We first define a new variable called infowindow, which defines an InfoWindow object on our Google Map. The content parameter is the content of the InfoWindow. This section accepts standard HTML markup to display and style the content as needed. Finally we add an event listener to our map marker, so that when it’s clicked our new info window displays in a nice container above our map marker.

Go ahead and make the updates to your google-maps-init.js JavaScript file, save it and refresh the site to view our changes.

Section 4) Displaying Multiple Locations on a Single Map

Displaying multiple locations on a single map is quite similar to what we’ve written above for a single location. The only difference is that instead of passing in a single location, we’ll now define multiple locations in a single array and then loop over them to properly initialize them and display them on our map.

First let’s define our multi-location array:

You’ll notice that we’ve setup a multi-dimensional array, where each entry in the array is our location with additional location details.

Example:

  • fishtown_attractions[0][0] – Joes Cheesteak (location name)
  • fishtown_attractions[0][2] – The best cheesesteaks this side of Market Street. Do not miss out on this instant classic! (location description)
  • fishtown_attractions[1][0] – Barcade
  • fishtown_attractions[1][2] – 39.967452 (equal to our longitude for this location)
  • Once we have an array of locations to work with, we’ll need to simply loop over each location, and add it to our map. For multiple map markers on a single instance of a map, your JavaScript file should be similar to:

    ‘ + fishtown_attractions[i][1] + ‘

    ‘ ); infowindow.open(map, marker); } })(marker, i)); } });

    In the next section we’ll swap out the default map markers and define our own custom markers to use in the map. For each location type, we’ll use a different map marker to help visually differentiate between them all.

    Section 5) Using Custom Map Markers

    In the previous section we defined the locations on our map, initialized our map, setup map markers and a small info box above each location. In this section we’re going to wrap up the tutorial by defining our own custom icons for each location on the map. This is going to help our users differentiate between all of the locations by type. You can also take this one step further and create a visual ‘key’ for your users to follow – but in this tutorial we’re going to keep it basic.

    The first thing you’ll want to do is decide what icons you’ll be using for each location. Since I’ve only defined 4 locations on the map, I’m going to gather 4 different icons.

    These are the icons that I’ve chosen to use, compiled into a single image file (to show you which icons I’m using). You’ll want to leave your map icons in separate image files, which will make working with them easier.

    icon-sheet

    You’ll want to upload your images somewhere on your site. I’ve gone ahead and created an /images/ folder inside of my theme root, alongside the /js/ directory we created in an earlier section. Inside of the /images/ directory, I’ve gone ahead and uploaded the four icons displayed above as four separate images:

  • joes-icon.png
  • barcade-icon.png
  • tree-icon.png
  • bike-icon.png
  • Note: I’ve set all of my icons to 50px wide, so they appear uniform.

    After you’ve uploaded your icons to the root of your theme (or another location that you’ve specified), we’ll want to go ahead and add one more item to the end of our fishtown_attractions array. This last item will be the name of the associated icon for the given located, and will be used to display the appropriate icon on the correct location.

    Now your entire JavaScript initialization file should look like the following:

    ‘ + fishtown_attractions[i][1] + ‘

    ‘ ); infowindow.open(map, marker); } })(marker, i)); } });

    Bonus Section) Custom Google Map Styles Using SnazzyMaps.com

    Finally, we’ll wrap up this tutorial with a small tutorial on styling your maps. The quickest and most efficient way to style maps, that I’ve personally come across is a service called Snazzy Maps. Snazzy Maps is a crowd sourced site of pre-defined styles for your Google Maps. I’ve found this site to be the best because it’s going to save you a tremendous amount of time meticulously tweaking and adjusting styles. You can sort by relevance, popularity, date of upload or name, filter by tags or even filter the map styles by color.

    Once on the site, you can browse around and preview what the styles will look like when applied to your map. I generally filter by popularity to check some of the nicer styles. When you’ve found a set of map styles that you would like to use, you can click on the style to bring you into the individual style listing page where you’ll find the code we need to add these styles to our map.

    You’ll notice that the styles are defined and compiled into a JavaScript array, which is exactly what the Google Maps initialization script expects.

    As an example, let’s say that you really liked the Flat Map with Labels map styles, and want to apply them to your map. All you need to do is click ‘Copy’ in the top right hand corner of the JavaScript Style Array window. Once copied, you’ll simply need to pass them in via a styles parameter.

    Looking at the entire script as a whole, you should now have something similar to:

    ‘ + fishtown_attractions[i][1] + ‘

    ‘ ); infowindow.open(map_6, marker); } })(marker, i)); }

    And that’s all there is to it! If the styles we just added don’t fit into the look and feel of your site, you can easily select another set of styles on Snazzy Maps and quickly swap out the JavaScript array in your initialization script to tweak the styles as needed.

    Wrapping Up

    Now that we’ve gone through all the motions of setting up a Google Map in your project – I’m hoping that you now have a stronger understanding of how to utilize Google Maps to it’s full potential in your projects. My hope is that this once intimidating idea of working with Google maps, make a whole lot more sense now. That you can walk away from this tutorial (or even reference it in future) and start integrating awesome and powerful maps into your projects.

    Now go out there and Wow your clients!

    Leave a comment

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.