>/D_
Published on

Add google maps to pages in SilverStripe

Authors
  • avatar
    Name
    Frank
    Twitter

UPDATE: A better method of adding a google map to a page in SilverStripe can be found here.

Adding google maps to a site using the SilverStripe CMS can be tricky, I often find that just adding the HTML for the google map iframe to a page does not work well - most of the time the page with the google map does not load properly and the iframe markup messes with the CMS.

Sometimes changing the iframe markup that is saved in the main content area for the page in the CMS works:

<iframe src="googlemap.com" width="320" height="240"></iframe>

to

<iframe src="googlemap.com" width="320" height="240"></iframe>

But that is not a very good solution for clients.

Recently I stumbled on a "google maps plugin" for SilverStripe that works as a TinyMCE plugin basically, it can't be described as a module due to the file structure and installation procedure - but it works well, is user friendly and supports adding a google map to any page in the CMS.

Installing the Google Maps plugin

There were a few hiccups installing and I had to search around forum posts etc. to find the full answer so I have collated the procedure I used here.

First get the code for the maps plugin, that is the direct download link but there is also a forum post by the author on SilverStripe.org.

Installation instructions needed to be updated for SilverStripe 2.4 and you can find a set from the forum thread above.

For convenience I am going to join the two sets of instructions below and add some changes I needed to make in order for the plugin to work in SilverStripe 2.4.2.

Google maps plugin complete instructions for SilverStripe 2.4.2

Grab a google maps API key.

Copy the 'googlemapsjs' folder to the '/sapphire/thirdparty/' directory.
Copy the 'googlemaps' folder to '/sapphire/thirdparty/tinymce/plugins' directory.

Open your 'mysite/_config.php' and add the following to enable the plugin in the CMS editor:

HtmlEditorConfig::get('cms')->enablePlugins('googlemaps');
HtmlEditorConfig::get('cms')->insertButtonsAfter('tablecontrols', 'googlemaps');

Open your mysite/code/Page.php class and add the javascript requirements for the Google maps to load on the page, substitute GOOGLE_MAPS_API_KEY for your own API key:

Requirements::javascript("sapphire/thirdparty/jquery/jquery-packed.js");
Requirements::javascript("http://www.google.com/jsapi?key=GOOGLE_MAPS_API_KEY");
Requirements::javascript("sapphire/thirdparty/googlemapsjs/mapsloader.js");

Open mapsloader.js now located in 'sapphire/thirdparty/googlemapsjs/mapsloader.js' and update the scriptURL variable:

//var scriptURL = 'jsparty/googlemapsjs/gmapsapp.js'; //OLD
var scriptURL = 'sapphire/thirdparty/googlemapsjs/gmapsapp.js';

Lastly, because of a change to prevent .php files from being executed from within the thirdparty tinyMCE plugins folder we need to move the googlemaps.php file to a googlemaps.htm file. More information if you get 403 errors can be found in this SilverStripe IRC log.

mv /thirdparty/tinymce/plugins/googlemaps/googlemaps.php /thirdparty/tinymce/plugins/googlemaps/googlemaps.htm

You need to edit the html file so that the php code is removed and your google maps API key is added throughout the file.

//Remove
<?php $GMap_api_key = "API_KEY_HERE" ?> 
 
//Replace
<?php echo $GMap_api_key?> //and
<?php echo $GMap_api_key ?> //note the extra space that you might miss with search and replace
 
//With your actual google maps API key

Lastly, if you want to hide your API key from the CMS user you can hide the API key field in:
/thirdparty/tinymce/plugins/googlemaps/googlemaps.htm

<fieldset style="margin-top:10px;">
<legend>API-KEY:</legend>
<div style="padding:4px">API KEY HIDDEN<input id="akey" readonly="readonly" name="akey" type="hidden" value="YOUR_API_KEY_HERE" class="text" style="width:570px" /></div>
</fieldset>