A Google Map
On our contact page we have a Google map. It shows the company location. Perch makes it really easy to add a Google map to your site.
The contact page in the starting point files has a Google map embedded. Let’s take that out, and instead add a new Perch region. We’ll call this one
Go back to our page and reload, the map will disappear. Then in the admin, we get our new region map. When selecting a template you can see there is already a map template there. What I’d like to do is edit that default template a little bit before we use it. We find the template in
perch/templates/content, and you should find in there a file named
map.html. Open that up, and edit it to look like the below code snippet:
<div class="frame"> <perch:content id="map" type="map" label="Address" width="560" height="300" zoom="15"> </div>
Save the template and then go back to the admin, select the Map template and hit submit.
You need to set up a Google API key in order to use Google maps. To get your Google maps API key, visit Google here.
Once you’ve got your key, add it to
abc123 with your key.
The Perch Config file is often used in this way, you can think of it as a place to add settings that don’t need to be changed in the CMS.