Adding a Location Map

Con­tact infor­ma­tion is one of the most impor­tant detail on your web­site. They’re a proof of trans­paren­cy, a will to be reached by your audi­ence, an act of hon­est com­mu­ni­ca­tion. Busi­ness­es who take it for grant­ed don’t inspire trust and open­ness to dia­logue.

One piece of this puz­zle is rep­re­sent­ed by the loca­tion of your busi­ness. No mat­ter if you’re the own­er of a design stu­dio, a restau­rant, or a kinder­garten, hav­ing an acces­si­ble and rec­og­niz­able map is impor­tant.

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 lit­tle hard­er for peo­ple to use cus­tom Google Maps on their web­sites by requir­ing a API key for each web­site. So first you need to get your­self such a key.

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

  • Log in into your Word­Press Dash­board;
  • Go to Appear­ance → Cus­tomize → Gen­er­al, and copy&paste it in the Google Maps API Key field;
  • Click on Save & Pub­lish 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 busi­ness place inside a page. All you have to do is to search your place in Google Maps, click on the Share but­ton and copy the link (it looks some­thing like this:,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 Word­Press Dash­board;
  • Go to Pages → click on Add new;
  • Select the Loca­tion Map page tem­plate from the right hand side­bar Page Attrib­ut­es box;
  • Scroll down to Map Coor­di­nates & Dis­play Options → Google Maps URL (beneath the page edi­tor) and paste the share link from Google Maps;
  • Now the page hero will dis­play the map in all its glo­ry.

In the same Map Coor­di­nates & Dis­play Options box you have oth­er con­trols like the hero height, cus­tom col­ors in tune with the over­all theme and the pin con­tent (we will cre­ate a spe­cial pin style with the infor­ma­tion you pro­vide) for fur­ther mend­ing the map to your style.


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

Anoth­er aspect that you should take into con­sid­er­a­tion is linked to the posi­tion of the pin inside the map. You can adjust its posi­tion as you think it’s bet­ter (by default Google aligns on cen­tered the view on your loca­tion). How­ev­er, if you’re not hap­py with how the pin is posi­tioned, 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 pro­ceed on find­ing 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?