GoogleMaps Plugin for CKEditor

Introduction

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

Author:

Alfonso Martínez de Lizarrondo

Sponsored by:

Ani López, SEO Consultant

Uritec

InControl Solutions

Moava

Version history:

  1. 1.0: 25/08/2007. First version for FCKeditor
  2. 1.x: Several improvements and features.
  3. 2.0: 30/11/2008. Lots of changes. Changed to closed source
  4. 2.x: Mainly corrections and bug fixing
  5. 3.0: xx/08/2010. Rewritten for CKEditor 3.4 and Google Maps API v3:
  6. 3.1: 29/11/2011.
  7. 3.2: 13/05/2012.
  8. 3.2.xx: xXx
  9. 3.3: 7-August-2012.
  10. 3.3.1: 8-August-2012.
  11. 3.3.2: 9-August-2012.
  12. 3.3.3: 9-August-2012.
  13. 3.3.4: 1-November-2012.
  14. 3.3.5: 26-November-2012.
  15. 3.3.6: 6-December-2012.
  16. 3.3.7: 6-December-2012.
  17. 3.3.8: 13-December-2012.
  18. 3.3.9: 16-December-2012.
  19. 3.4.0: 10-March-2013.
  20. 3.4.1: 12-March-2013.
  21. 3.4.2 18-May-2013
  22. 3.4.3 13-June-2013
  23. 3.4.4 26-June-2013
  24. 3.4.5 24-August-2013
  25. 3.4.6 9-September-2013
  26. 3.5.0
  27. 3.5.1
  28. 3.5.2 13-October-2013
  29. 3.5.3 21-November-2013
  30. 3.5.4 20-January-2014
  31. 3.5.5 2-February-2014
  32. 3.5.6 13-February-2014

Known bugs:

Google bar isn't available.

Installation

1. Copying the files

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

ckeditor\
	...
	images\
	lang\
	plugins\
		...
		googlemaps\
			...
			plugin.js
			readme.html
			dialogs\
			docs\
			images\
			lang\
		...
	skins\
	themes\

2. Adding it to CKEditor

Now add the plugin in your config.js or custom js configuration file: config.extraPlugins='googlemaps'; If you are already using other additional plugins, then you must have a single extraPlugins statements with all the plugins separated by commas: config.extraPlugins='confighelper,googlemaps';

3. Adding it to the toolbarset

Add the button 'GoogleMaps' (case sensitive) to your toolbarset: config.toolbar_Full = [ ['Source','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Maximize', 'ShowBlocks','-','About'], ['GoogleMaps'] ];

4. Configure the plugin

There's no need of an API key in this version, it will automatically work on any server

Configuration options

Please note that following the CKEditor pattern, the config options now are lowercased.

5. Use it

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

Here's a video showing the basic features and another for the elements tab

6. Translations

To add a new translation open plugin.js and search for "translations", it's at line 1113 and add your language (the example is based on adding Polish ('pl')

// translations lang : ['el', 'en', 'es'], to // translations lang : ['el', 'en', 'es', 'pl'],

Then in the lang folder copy the en.js to pl.js, edit that file and in the first line set your language:

CKEDITOR.addPluginLang( 'googlemaps', 'pl',

and finally, translate all the text between quotes :-)

If you send it back to me I'll include it in the next versions.

Other notes

The KML files aren't used in the static maps. And in order for them to work you should use them in a public server (localhost won't work with .kmz)
You might need to adjust the server to use the correct MIME types (application/vnd.google-earth.kml+xml for .kml and application/vnd.google-earth.kmz for .kmz).

As a summary of features that aren't available in the static preview:

 

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

Disclaimers

CKEditor is © CKSource.com

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