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 – Get the Google Maps API Key and add it to your website

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

Once you’ve got the API key, go to Appearance → Customize → Theme Options → General and paste the code into the Google Maps API key field.

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 and copy the URL from the browser bar (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 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 link again. You can see a short video about how to proceed on finding the right map link: