Google Maps Plugin for FCKeditor

Introduction

This is a dialog-based plugin to handle insertion and modification of Google Maps in FCKeditor

Author:

Alfonso Martínez de Lizarrondo

Sponsored by:

Dynamical.biz

Version history:

1. 1.0: 25/08/2007. First version.
2. 1.1: 28/08/2007. Ups, didn't test 2.4.3
3. 1.2: 31/08/2007. New icon by Dynamical.biz. Use IMG instead of DIV as placeholder for the moment.
4. 1.3: 02/09/2007. Complete documentation in HTML for installation and users.
5. 1.4: 21/09/2007. Use the onload event to generate the maps (to avoid IE issues), and include the call to GUnload call. Automatically remove the toolbar icon if there is no proper Google Key
6. 1.5 30/09/2007. Support for drawing polylines in the map.
7. 1.6 24/10/2007. Support for multiple markers.
8. 1.7 03/02/2008. Support for the new dialogs in FCKeditor 2.6.

Get the latest version and/or updated info

Known bugs:

The 'Preview' command in FCKeditor won't work properly if there's a GoogleMap in the content. This seems related to the way the Google Maps API script loads and inserts its content.

These threads in the API group point to the same problem:
http://groups.google.com/group/Google-Maps-API/browse_thread/thread/7849dfd612181b6c/1c3e5f7fb5fa3301
http://groups.google.com/group/Google-Maps-API/browse_thread/thread/89ea5fa4e0a0ccb9/05c364940447891d

A workaround for the problem could be to use the Server preview plugin

Installation

1. Copying the files

Extract the contents of the zip in you plugins directory, so it ends up like this

editor\
	...
	js\
	lang\
	plugins\
		...
		googlemaps\
			fckplugin.js
			readme.html
			dialog\
			docs\
			images\
			lang\
		...
	skins\

2. Adding it to FCKeditor

Now add in your fckconfig.js or custom js configuration file the following line: FCKConfig.Plugins.Add( 'googlemaps', 'en,es') ;

3. Adding it to the toolbarset

Add the button 'googlemaps' (lowercase) to your toolbarset: FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink', '-','googlemaps','-','About']
] ;

4. Configure the plugin

The most important part is your GoogleMaps key. It must be set properly for the plugin to work, or Google will refuse to serve the maps data.
You must get one for each server where you want to use the plugin, just get the key for free here after agreeing to the Terms of Use of the GoogleMaps API: http://www.google.com/apis/maps/signup.html
(Please don't ask questions about where you can use GoogleMaps or how to get key, those items aren't related to this plugin.)
For example the key for "localhost" is
ABQIAAAAlXu5Pw6DFAUgqM2wQn01gxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSy5hTGQdsosYD3dz6faZHVrO-02A

Once you get the key, you must set it in the configuration file: FCKConfig.GoogleMaps_Key = 'ABQIAAAAlXu5Pw6DFAUgqM2wQn01gxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSy5hTGQdsosYD3dz6faZHVrO-02A' ;

(remember to replace the key in green with your own one)

Note: if you leave an empty string then the toolbar icon won't be shown (so you can easily use the same toolbar configuration as the current setup in FCKeditor doesn't allow to add/remove plugins/ToolbarIcons in a really easy way)

There are several options that you can set to change the default values for a new map:

• FCKConfig.GoogleMaps_Width : The width of the map area
• FCKConfig.GoogleMaps_Height : The height of the map area
• FCKConfig.GoogleMaps_CenterLat : The latitude of the center
• FCKConfig.GoogleMaps_CenterLon :The longitude of the center
• FCKConfig.GoogleMaps_Zoom : The zoom level
• FCKConfig.GoogleMaps_MarkerText : The text for the marker

All these values can be set in the fckconfig.js file, a custom js configuration file, or at the moment of the creation of the FCKeditor instance using any language.

If you want to support polylines in IE, you must add the vml namespace to your page like this:

5. Use it

Now empty the cache of your browser and reload the editor, the new button should be ready to use.

Final notes

If you find this plugin useful, consider making a donation so it can be further improved, any amount can help to keep the development running.

If you need some special feature for this plugin, or if you need any other kind of plugin for FCKeditor then contact me and we can discuss it

Disclaimers

FCKeditor is © FredCK.com

Google, Google Maps and the Google Maps API are all properties of Google.