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.
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.
Step 1: Add the HTML
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>
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
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.
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
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
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’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).