A customer of mine requested a custom Google Maps plugin for his richtext editor. Since I could not find one for the TinyMce editor he was using, I decided to create my own. To get this plugin working, you need the three things:

1. API key

To get Google Maps appearing on your webpage, you need your very own API key from Google. You can obtain one here: http://code.google.com/apis/maps/signup.html

2. Coordinates

You can query the coordinates of the place you want to show by using the form below. Just enter your location as a comma or space seperated string and press “Go!”.

You will find your coordinates between parentheses just above the form.

Why not use the locationstring as a variable in a TinyMce dialog box, you say? The main reason is that once you have inserted the Google Map into your TinyMce textarea, it does not appear when in wysisyg-mode. You first need to save (or publish) the page in order for the map to appear.

The form above saves you the time of republishing over and over again, just to get your location right.

3. Download

You can download the plugin here.

Remember: it’s a very crude first version with much room for improvement. It comes with a readme.txt, in which I have tried to explain the steps I have taken.

Originally a Google Map needs a “onLoad” function in your body-tag. Since TinyMce is mainly used in content management systems, a user cannot access the body-tag. I added some extra Javascript that avoids the body-tag from being used (not my own, I found the code somewhere on the Internet).

SourceForge

Jeroen van der Stijl has picked up this project and created a SourceForge depository. Since my code was very crude, any improvements are more than welcome. Check out https://sourceforge.net/projects/mcegooglemap/