How To... Add Google Maps to Your Page

Embedding and displaying Google map content on your Pepperio page.

Displaying Googlemaps within your Pepperio pages is a relatively simple task. You need to grab a key from Google, add the key to the head of the page that will display this map and finish off with javascript to complete the loop.

Pepperio compiles pages on the fly when the browser requests the page, therefore the standard head tags are not seen in a Pepperio layout. To add head tags, include this script below the pre-filled xml declaration:
<pepperio:head> ...your head elements </pepperio:head>

1. Retrieve an API key from Google

First of all you will need to head over to www.google.com/maps/api and register your site. Enter the url of your site (i.e www.mygooglemapsite.com) and issue yourself with a key for your domain. Copy this key and keep it for later reference.

2. Create a Snippet

Create a new layout (or copy an existing one) and give it a name. I.e. Google Maps Layout, and insert this code (which contains your api key) just below the opening html tags...

1. <div id="map" style="width: 500px; height: 300px"></div>

3. Create a Layout and add the API key

Create a new layout (or copy an existing one) and give it a name. I.e. Google Maps Layout, and insert this code (which contains your api key) just below the opening html tags...

1. <pepperio:head>

2. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=
   ABQIAAAA-XqHx_uoz6A2ZOzBdPSa5xQ-sbIIuD3kJTS3M3_-kME8pEHnFB
   R_szM3AcL5W6xuybGK9IIfMJv10w" type="text/javascript">

3. </script>

4. </pepperio:head>

4. Add javascript to your style

Within the corresponding style, you then need to add this code to the javascript box:

1. function startup(){

2. if (GBrowserIsCompatible()) {

3. var map = new GMap2(document.getElementById("map"));

4. map.setCenter(new GLatLng(37.4419, -122.1419), 13);

5. }

6. }

2. Build your page

Assemble your template. Create your page and apply the template.