Google Maps Plugin for FCKeditor

Change your language

Introduction

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

Author:

Alfonso Martínez de Lizarrondo

Version history:

1.0: 25/08/2007. First version.
1.1: 28/08/2007. Ups, didn't test 2.4.3
1.2: 31/08/2007. New icon by Dynamical.biz. Use IMG instead of DIV as placeholder for the moment.
1.3: 02/09/2007. Complete documentation in HTML for installation and users.
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
1.5: 30/09/2007. Support for drawing polylines in the map.
1.6: 24/10/2007. Support for multiple markers.
1.7: 03/02/2008. Support for the new dialogs in FCKeditor 2.6.
1.8: 02/05/2008. Support for Terrain view and remembering the selected map type. The preview in the editor now uses the static maps.
1.9: 19/05/2008. It respects the values set for width and height (only assumes that they are pixel if they are numbers without any modifier)
Optional configuration parameters: GoogleMaps_WrapperClass and GoogleMaps_PublicKey (this code proposed by Makerweb.it) .
1.95: 12/09/2008. The preview reflects the real type of the map. It shows also the markers.
Dutch translation added
1.96: 14/09/2008. Preserve any previous onload handler.
French translation added
1.97: 20/09/2008. Simplified the onload handler according to the advice by Hector Virgen.
2.0: 30/11/2008. Lots of changes:
- First and foremost: The plugin is no longer open source. It's available only for those that have helped in its development and of course, anyone else that pays for it.
- The pages will load better, at first only a static preview is shown, and only when the rest of the page has been loaded the Google scripts will start loading. It's possible to even select that they don't load until the user clicks on the map.
- Multiple polylines, multiple polygons (or areas as I use to call them).
- Selection of color for markers, lines, areas. Width and opacity for lines and areas
- Each new element (marker, lines, areas) changes its color automatically from the previous one
- Embedded HTML editor for the information window of markers.
- Possibilty to include a KML overlay
- Polylines are shown in the static preview
- Selection of which controls are shown on the map
2.1: 06/01/2009.
- New elements: Text markers. They provide a simple way to overlay a permanent text on the map.
- In the "load map" option it's possible to select "Static", so only an image will be used.
- The files are precompressed to improve loading time
- The content of InfoWindows for the markers are wrapped in a div with class "InfoContent" so it's possible to control the styles.
  The new text markers are wrapped in a structure of double div: <div class="MarkerTitle"><div> text </div></div> By default such markers don't have any background so they look like other text in the map, but if you want to hightlight them you can add to your stylesheet something like
```
.MarkerTitle 
{
	padding: 2px;
	border: 1px solid #333;
	background-color: #e5e5e5;
}
					
```
- New configuration option: GoogleMaps_DialogCss
- The GoogleMaps_PublicKey setting didn't work properly. Fixed all the issues found.
- The embedded editor for the markers will automatically disable this plugin inside of it to avoid any false warning.
- Included Chinese translation.
- The generated javascript will be preserved unless it's edited with the dialog. That means that if you manually edit some part of the map not supported by the current plugin, it shouldn't be reverted automatically whenever you try to edit the rest of the HTML.

Get the latest version and/or updated info

Known bugs:

None, the preview problem that existed in the previous version has been solved by the new loading system

Installation

1. Copying the files

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

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', 'de,en,es,fr,it,nl,zh') ;

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
FCKConfig.GoogleMaps_WrapperClass : The Google Maps automatically fills the width and height of the generated div, so if you want to add a little spacing and a border, you need to use a div around it. If this entry contains a non-empty value then such a div will be generated with this class.
Important: in the preview inside the editor, the class will be applied to an image, not a div!
FCKConfig.GoogleMaps_Editor_Width : Width of the HTML editor for the content of markers
FCKConfig.GoogleMaps_Editor_Height : Height of the HTML editor for the content of markers
FCKConfig.GoogleMaps_Editor_CustomConfigurationsPath : CustomConfigurationsPath of the HTML editor for the content of markers
If it's missing it will reuse the path of the main instance of FCKeditor.
FCKConfig.GoogleMaps_Editor_ToolbarSet : Name of the Toolbarse of the HTML editor for the content of markers
This toolbarset must be defined in the configuration file for the embedded editor. By default it uses the "Basic" set.
FCKConfig.KMLBrowserURL : URL of the file browser for KML files. It defaults to LinkBrowserUrl. If it's an empty string the "Browse server" button won't be shown
FCKConfig.KMLBrowserWindowWidth and FCKConfig.KMLBrowserWindowHeight: Dimensions of the window for the KML file browser
FCKConfig.GoogleMaps_DialogCss: You can set here the path of a stylesheet to add to the editing dialog. The objective is being able to show correctly in the dialog how the text markers and InfoWindow will work in the real page. Of course, using this option means that other elements of the dialog might be shown "distorted" due to unexpected side effects of your stylesheet.
You can use a special file that only includes the minimum rules to avoid any problem, or your can assing FCKConfig.GoogleMaps_DialogCss = FCKConfig.EditorAreaCSS
FCKConfig.GoogleMaps_PublicKey : If you are using the editor in a different domain than the final location of the web, the maps won't work correctly by default. In this situation you must use this setting. First, set the GoogleMaps_Key to the key of the domain where FCKeditor will be run, and then you have two options:
- Set an emtpy value for GoogleMaps_PublicKey (FCKConfig.GoogleMaps_PublicKey = '';) this means that when the user wants to create a map he must supply the key for the final domain. This is useful if you don't know beforehand all the domains where that installation will be used. Of course, you must explain to your users how to get an API Key
- Set the value of the final domain in GoogleMaps_PublicKey. For the user this means no troubles at all, everything works automatically.

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.

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

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