Beautiful Google Maps in WordPress

Published 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.

MapPress Settings Screen
MapPress Settings Screen right after installation. Notice the warning letting us know that we need to add an API Key if we want to use the plugin.

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

MapPress Custom Box
Creating and customizing maps is pretty straightforward with MapPress. Just name the map, fill the options, and you’re done!

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.

Embedding a Google Map
Google Maps makes it super easy to embed a map in our websites. Just look for the location you’re interested in, click on Share, and copy and paste the iframe tag into your WordPress site.

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.

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.

PoorNot badGoodGreatExcellent (8 votes, average: 3.25 out of 5)
Loading...

19 thoughts on “Beautiful Google Maps in WordPress

  1. are you able to tell where to put these scripts etc within a genesis framework???

    1. Hi Mick,

      I understand you’re interested in using the JavaScript API. If that’s the case, you need to enqueue the library first (https://maps.googleapis.com/maps/api/js). You can do this by adding the enqueue function in your theme’s functions.php file or you can create your own plugin with all your customizations (which obviously include this enqueue function).

      Then, to add the map, it really depends on how you want this to work. If you want the same map in all your pages, you can create a custom JavaScript file and enqueue it as we enqueued the library. If only some pages are supposed to have the map, you need to tweak their own templates… or use Genesis’ own hooks and filters (which I can’t access now, because we don’t own the theme).

      In summary, you need to determine what you want first, and then tweak your theme as needed.

      Regards,
      David

  2. is it possible to show address on marker? Like clicking on marker address shows. Thanks

    1. Hi John!

      The feature you’re looking for is called “Info Windows“. As you can see in the documentation, you can define the contents that will appear in the popup when a user clicks on a marker.

      Best regards,
      David

  3. Where to add snazzymaps code for just background map for homepage in a wordpress website. I dont want styling applied to other google maps embedded
    in posts.

    1. If your front page is a regular page, you can create a page template (with the maps custom code) and use it in your front page.

  4. Hello David,

    I just wanted to say thank you very much for taking the time to putting this together.
    I’d always thought Google Maps was complicated but your beautiful google maps in WordPress article
    helped me achieve it for a WordPress site I was working on.

    I ended up with the complex method because it gave me more control as pointed out.

    Thank you once again

  5. Great article David! Thanks for sharing this useful information for us trying to add our Google Maps into our WordPress website; it’s also very important not only to add Google Map but to make sure it matches with your website design, here we’ve written an article about how to customize your Google Maps in your WordPress site: https://goo.gl/JnZtIz
    Your feedback would be highly appreciated 🙂

  6. Oh wow!!!
    what a great article for which i was searching actually. Well written admin thank you for making this so easy.
    Thank you

    1. Hi Brandon!

      If you follow the JavaScript API approach, you’ll be able to customize the map entirely. And, of course, the resulting map will be an iframe too… so I’d say you’ll get what you need 😉

  7. Awesome explanation. You just saved me from a major repeating headache. Thanks!

  8. My salutations to David Aguilera! Excellent Article, thank you.

  9. Hi to anyone
    Any ideas to make the map look different to the default.
    For example, I had a live wallpaper on my android device and it had a “Paper Like” theme on it. Is this something anyone can help me with?

Leave a Reply

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

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.