Adding a Location Map

Contact information is one of the most important detail on your website. They’re a proof of transparency, a will to be reached by your audience, an act of honest communication. Businesses who take it for granted don’t inspire trust and openness to dialogue.

One piece of this puzzle is represented by the location of your business. No matter if you’re the owner of a design studio, a restaurant, or a kindergarten, having an accessible and recognizable map is important.

Step 1 — Set the API key from Google Maps to display your Location on the Website

For a while now, Google has made it a little harder for people to use custom Google Maps on their websites by requiring a API key for each website. So first you need to get yourself such a key.

Now that you have the key, follow these steps to save it on your site:

  • Log in into your WordPress Dashboard;
  • Go to Appearance → Customize → General, and copy&paste it in the Google Maps API Key field;
  • Click on Save & Publish and move to the next phase.

Step 2 — Set the Location using the “Location Map” template

Now you can set a Google Map of your business place inside a page. All you have to do is to search your place in Google Maps, click on the Share button and copy the link (it looks something like this: https://www.google.com/maps/place/Firefly+Guesthouse+-+The+Berlin+Angkor/@13.3784176,103.8537839,17z/data=!3m1!4b1!4m5!3m4!1s0x31101705677543e1:0xd24e4bed8c34702d!8m2!3d13.3784124!4d103.8559726).

Here’s what you need to do next:

  • Log in into your WordPress Dashboard;
  • Go to Pages → click on Add new;
  • Select the Location Map page template from the right hand sidebar Page Attributes box;
  • Scroll down to Map Coordinates & Display Options → Google Maps URL (beneath the page editor) and paste the share link from Google Maps;
  • Now the page hero will display the map in all its glory.

In the same Map Coordinates & Display Options box you have other controls like the hero height, custom colors in tune with the overall theme and the pin content (we will create a special pin style with the information you provide) for further mending the map to your style.

FAQs

Why is the pin on another spot than the one I want it to be?

Another aspect that you should take into consideration is linked to the position of the pin inside the map. You can adjust its position as you think it’s better (by default Google aligns on centered the view on your location). However, if you’re not happy with how the pin is positioned, then you should go back to Google Maps, shift the map around and copy&paste the share link again. You can see a short video about how to proceed on finding the right map link:

This article applies to Osteria, and Rosa as they share the same underlying structure.

Updated on May 4, 2018

Was this article helpful?