Beautiful Google Maps in WordPress

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.

Nelio Popups

Fantastic plugin! It’s really easy to create popups as you’re already used to the editor, and all the options it has are really well crafted.

Juan Hernando

WordPress.org

Free Download

Premium Version

Google Maps JavaScript API—Full Control on Your Maps

The last option I wanted to discuss today is the Google Maps JavaScript API (which, by the way, is the solution we’re using in our contact page). This is slightly more complex than what we’ve seen so far, but it definitely pays off if you want to go crazy about your maps. Here’s how it works:

1. You define a div tag in your HTML code that’ll contain the map,
2. load the Google Maps JavaScript API using your API Key, and
3. 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 <div id="neliohq-map">. Now, we simply need to proceed with steps two and three. Loading the Google Maps JavaScript API is as easy as inserting the following script:

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 div tag:

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:

• mapEl is a reference to the DOM element neliohq-map which, as we just said, is the div that’ll contain the map itself.
• mapOptions is a JavaScript object that specifies how the map looks and behaves. If you look at the different options, you’ll see that we’re able to center the map wherever we want, enable or disable drag and zoom controls, and so on.
• map is the Google Map object itself, which is defined using the constructor new google.maps.Map and 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:

• map is a reference to the google.maps.Map instance we created before,
• position is the latitude and longitude location of the marker itself, and
• icon contains 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 ?.

Bonus Tip

Finally, I wanted to share a bonus tip with you, folks ? If you want your maps to look gorgeous, just take a look at Snazzy Maps—an outstanding website with tons of styles you can use in your maps. Just select the style you like, copy the JavaScript Style Array to your clipboard, and add it as an extra option in your mapOptions object using the key styles:

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.