Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Customising the CMS /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Easy Google Maps 'Plugin' for Silverstripe


Go to End


24 Posts   15842 Views

Avatar
MikeOne

Community Member, 40 Posts

24 December 2009 at 7:18am

Hi Eric,

Not sure what the problem could be. Where does the error come from? Script? PHP? SilverStripe?

I guess I can only advice to carefully follow the steps outlined in the readme file. A common problem seems to be that people miss the fact that you have to put your API key in 2 (!!) places in the code.

Please let me know.
Cheers,
Michiel.

Avatar
EricW

Community Member, 6 Posts

26 December 2009 at 7:06am

Hey mike, thanks for the reply.

I guess I am just having trouble unzipping the files. I have not attempted to solve this problem since I first wrote. I am sure it is just user error. I will post again once I make it work.

Merry Christmas!
Eric

Avatar
kiwiot

Community Member, 8 Posts

19 May 2010 at 12:33am

Edited: 19/05/2010 12:35am

Hi Mike,

I wanted to apply your google maps module to Silverstripe 2.4. The main issue was that 2.4 no longer uses jsparty (see : http://doc.silverstripe.org/upgrading:2.4.0#removed_jsparty) which basically meant that the file structure of the installation needed to be updated.

I hope you dont' mind but I have rewritten the first part of the installation file readme.rtf file below for anyone out there who also wants to use this fantastic little gem of a module.

To install for silverstripe 2.4 use the following steps:

- 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 block:


------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// Enable Google Maps in the CMS
// Enter you Google Mans API key here 
$GMap_api_key = "API_KEY_HERE";
	
HtmlEditorConfig::get('cms')->enablePlugins('googlemaps');
HtmlEditorConfig::get('cms')->insertButtonsAfter('tablecontrols', 'googlemaps');
Requirements::javascript("sapphire/thirdparty/jquery/jquery-packed.js");
Requirements::javascript("http://www.google.com/jsapi?key=".$GMap_api_key);
Requirements::javascript("sapphire/thirdparty/googlemapsjs/mapsloader.js");


// End Google Maps stuff
------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Open gmapsapp.js now located in 'sapphire/thirdparty/googlemapsjs/gmapsapp.js'

and update the var scriptURL from

var scriptURL = 'jsparty/googlemapsjs/gmapsapp.js';

to

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

See the rest of the readme.rtf for final instructions and creating a Google Maps API key.

Regards,
Jared

Avatar
MikeOne

Community Member, 40 Posts

19 May 2010 at 1:47am

Hey kiwiot,

Brilliant. Thanks!

I haven't had a chance yet to look at 2.4 but I will do soon!

Cheers,
Mike.

Avatar
innyinskip

Community Member, 46 Posts

16 July 2010 at 8:45pm

Awesome!

First plugin ive actually managed to get working!
Works a treat on 2.4
Great work mate, loving it!

Avatar
potion_maker

Community Member, 36 Posts

5 November 2010 at 9:38am

Edited: 05/11/2010 10:31am

/thirdparty/tinymce/plugins/googlemaps/googlemaps.php = /thirdparty/tinymce/plugins/googlemaps/googlemaps.html

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.html

<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>

And finally you have to open /thirdparty/tinymce/plugins/googlemaps/editor_plugin_src.js and change
(located at line 17)
file : url + '/googlemaps.php', becomes file : url + '/googlemaps.html',
Otherwise it will continue to look for the php file that no longer exists

Avatar
mhdesign

Community Member, 216 Posts

31 May 2011 at 4:59pm

Edited: 29/06/2011 8:14pm

Hi - downloaded the Version 3 beta and installed, added API to config.php and did /Dev/Build - no extra button in CMS toolbox. Any ideas as to where I went wrong? Thanks in advance...

<later> Always pays to read back over the thread. I'm using SilverStripe 2.4 which no longer has 'jsparty'... so I've updated the relevant paths as Kiwiot mentioned above. So I have my 'Maps' tool in Sapphire, I can enter the street address and produce a map in the CMS that can be inserted on the page... so now all I need to do is work out why I get a gray square on the page... </later>

Re-read Kiwiot's instructions... missed the following updated line in the gmapsapp.js file:

var scriptURL = sapphire/thirdparty/googlemapsjs/gmapsapp.js

Actually the original line wasn't even there... so I simply added this line of code. All sorted now thanks!

Avatar
Platypus

Community Member, 43 Posts

12 September 2011 at 12:51am

Edited: 21/10/2011 11:59am

var scriptURL = 'jsparty/googlemapsjs/gmapsapp.js';

This line needs to be changed/updated in the file mapsloader.js

to:

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

Thanks for this nice module, it should be mentioned in the modules section.

Go to Top