Nowadays, it’s quite common to see Google Maps embedded in a website—just take a look at our contact page to see an example ?. They’re a great tool for letting your visitors know where they can find you or where an event you’re organizing will take place. But how can you add a Google Map in your WordPress site? Well, today I’m going to teach you how.
Plugins—The Easiest Way to Add Google Maps in WordPress
If maps play an important role in your website and, therefore, you need to embed them often, then a plugin is probably the solution you need. A quick search in WordPress.org reveals that there’s plenty of plugins for embedding Google Maps in your site. In this post, though, I’m going to focus on MapPress Easy Google Maps, a pretty neat plugin with more than 100,000 active installs.
After installing the plugin, go the plugin‘s settings screen and paste your Google Maps API Keyin the field named (yes, you got it right ?) Browser API key. If you don’t have one, get yours by following the steps described here.
Then click on Save Changes, and go edit the page or post in which you want to add a map.
Now, scroll down until you find a new box named MapPress and click on New Map button to create a new map. This will open the following editor
where you can tweak the map. In particular, you’ll be able to name the map, choose its size, and enter the address it has to pin to (or click on My Location to let the plugin automatically detect where you are). Notice you can add as many markers as you want by locating multiple addresses, one after the other.
Once the map is ready, you simply need to click on Insert into post button and a new shortcode will appear. Easy, huh?
Google Maps iFrames—Because It Only Tooks a Few Clicks
If you don’t want to use a plugin for such a simple action as embedding a map in your WordPress site, you’re lucky! Google Maps makes it super easy to embed maps using
iframes. Just open Google Maps in your browser and look for the address you’re interested in. Once you’ve found it, click on the Share button, select the tab Embed map, choose the map size, and copy the
iframe. Then, simply paste it in a page or post in your WordPress site and you’re done.
As you can see, this solution is similar to the previous one in complexity, with its pros and cons. Among its pros, you’ll find there’s no need to get an API key nor to install yet another plugin in your installation to embed maps—
iframes are easy to use, fast, and reliable. On the downside, you have to leave WordPress to get the job done. Moreover, if you ever want to change the map, you’ll have to repeat the process and replace the original
iframe completely, whereas in the first solution you simply needed to edit the map within MapPress’ box so that the shortcode can load the new version.
Finally, note that this solution is not limited to one marker only—if you’re willing to expend some extra time on it, go to Google’s My Maps and create a custom map with multiple markers, lines, and so on.
- You define a
divtag in your HTML code that’ll contain the map,
- add a custom script where
- you specify how the map looks and behaves, and
- any markers that might be used in it.
Let’s see it with an example. Let’s start by assuming that we already have a
div that’ll contain the map, and that it’s identified as neliohq-map—that is, we have a tag such as
Then, you simply need to add the map itself. In order to do this, you have to add the following script in your HTML code after the neliohq-map
So far, the script is super easy, isn’t it? We’re simply creating a function named loadNelioHQMap and instructing Google Maps to call it when the window is ready (line 5). Of course, we’re not doing anything yet, but getting this right is what matters the most. Then, loading the map is as simple as adding this snippet within the function we just created:
There are three variables in this function:
mapElis a reference to the DOM element neliohq-map which, as we just said, is the
divthat’ll contain the map itself.
mapis the Google Map object itself, which is defined using the constructor
new google.maps.Mapand passing the other two variables as input parameters.
If you go ahead and try this, you’ll realize that the map looks as you wanted, but there are no markers yet. In order to add one or more markers, just follow this example:
For each marker you want to create, call the constructor
google.maps.Marker and specify its settings:
mapis a reference to the
google.maps.Mapinstance we created before,
positionis the latitude and longitude location of the marker itself, and
iconcontains a few settings that define its appearance.
Repeat the previous snippet as many times as you want, and you’ll be able to add as many markers as you need ?.
mapOptions object using the key
And that’s all! I hope I helped you add Google Maps in your WordPress site. For questions and feedback, please leave a comment below.
Featured image by NASA.