GoogleMaps Plugin for CKEditor
Introduction
This is a dialog-based plugin to handle insertion and modification of Google
Maps in CKEditor
Alfonso Martínez de Lizarrondo
Sponsored by:
Ani López, SEO Consultant
Uritec
InControl Solutions
Moava
Version history:
- 1.0: 25/08/2007. First version for FCKeditor
- 1.x: Several improvements and features.
- 2.0: 30/11/2008. Lots of changes. Changed to closed source
- 2.x: Mainly corrections and bug fixing
- 3.0: xx/08/2010. Rewritten for CKEditor 3.4 and Google Maps API v3:
- It doesn't require a maps API key
- Improved performance of the maps
- The dialog is located in the main document, so config.GoogleMaps_DialogCss is no longer needed
- 3.1: 29/11/2011.
- Tested with CKEditor 3.6.2 and Google Maps v3.7.
- Fixing previous bugs
- Enabled creating and deleting lines and areas.
- 3.2: 13/05/2012.
- Tested with CKEditor 3.6.3 and Google Maps v3.8.11.
- Fixing reported problems
- Context menu and double click in the editor are handled exclusively
- It's possible to delete single points in Lines and Areas.
- Enabled Traffic and Weather layers.
- End script can be configured with config.googleMaps_endScriptPath.
- Image buttons merged in a single sprite.
- Reorder translations so it uses English if a better one isn't available.
- New translations: ar, cs, fi, fr, sk, tr.
- 3.2.xx: xXx
- 3.3: 7-August-2012.
- Option to set the custom icons from the dialog instead of only from the config file
- Use shadows for the markers (for default and custom icons).
- Several new configuration options
- Button in the editor for markers to insert a "Destination" link.
- Remember which info windows on markers should be open.
- New texts since 3.2:
transit : 'Transit',
directions : 'Add Directions link',
directionsTitle : 'Directions',
- 3.3.1: 8-August-2012.
- 3.3.2: 9-August-2012.
- Force redraw of the last segment of areas in static maps
- Better resize in IE of the marker and icon dialogs
- 3.3.3: 9-August-2012.
- New icons didn't work correctly if there was no one defined in the config.
- 3.3.4: 1-November-2012.
- Compatibility with CKEditor 4.
- Avoid problems if parts of the Google Maps or other Google libraries are already loaded.
- 3.3.5: 26-November-2012.
- Avoid error if two maps are present in the same page.
- 3.3.6: 6-December-2012.
- Avoid problems while inserting Markers and Text notes if there are Lines or Areas in the map.
- Try to avoid layout problems due to the excesive padding in the dialogs of Moono (default skin for v4).
- Little error while creating a Text note.
- 3.3.7: 6-December-2012.
- Corrected compatibility of languages with CKBuilder.
- 3.3.8: 13-December-2012.
- Validate that the 'zoom' value is always numeric and not a string.
- Kml files were not working properly .
- 3.3.9: 16-December-2012.
- Validate better the path to Kml files.
- 3.4.0: 10-March-2013.
- Compatibility with data filtering of upcoming CKEditor 4.1.
- Compatibility with scripts that continously call editor.getData() (like the "Wordcount" plugin) instead of detecting changes.
- 3.4.1: 12-March-2013.
- Compatibility with devTools plugin.
- 3.4.2 18-May-2013
- Compatibility with Bootstrap in the map dialog.
- Set <script> as the requirement for the ACF in CKEditor 4.1.
- 3.4.3 13-June-2013
- Handle correctly custom icons placed in folders with dots.
- 3.4.4 26-June-2013
- Support loading of maps in hidden divs. Call "initGmapsLoader()" when a hidden div is show to refresh the size of the maps. Also such maps can be configured to not load the Google libraries on page load.
- 3.4.5 24-August-2013
- Improved compatibility with CKBuilder (merge icon into the main toolbar strip).
- Enabled "strict mode" and fixed issues.
- Update "Text notes" code to draw and update properly in the dialog.
- 3.4.6 9-September-2013
- Detect correctly the map id if the output has the line feeds removed.
- Add the optional div wrapper class to the ACF.
- 3.5.0
- Included support to specify an API Key.
For the moment it seems that the maps work correctly without a key, but in the future Google might change its mind, so it's better to include support right now. You can set it using ".googleMaps_ApiKey"
- Added new configuration option ".googleMaps_weatherUsaUnits" to set the weather in Fahrenheit and Wind speed in Miles/hour.
- Set empty alt attribute on the image to avoid problems with the ACF.
- 3.5.1
- Fixed bug in the final page when areas are used due to wrong variable assignment.
- 3.5.2 13-October-2013
- Use of streetview data
- Enabled drawing of circles. In the static images circles won't be shown
- If the map has been set to 45º imagery or it has been rotated, use that info (this won't work also with the static image)
- Make the maps work automatically if the contents are inserted into a fully loaded page (for example loaded by ajax or a preview page of the editor).
- Cache the geolocation data on creation of the first map to speed up further requests
- Hidden the options to specify the zoom control and map types
- Corrected the ability to display Traffic or Transit
- Unified the options to specify the road types and added Bicycle
- 3.5.3 21-November-2013
- If a onLoadedGMaps function is defined, call it after the maps have been loaded, a "loadedGMaps" includes the references to the created maps (use Firebug or similar to inspect the objects)
- Compatibility with IE11
- Compatibility with the new "image2" widget of CKEditor 4.3
- Try to limit the URL length of static maps
- 3.5.4 20-January-2014
- Removed console.log call left in the code
- Better compatibility with recent changes in CKEditor
- 3.5.5 2-February-2014
- Added Autocomplete for the Search location field
- 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']
];
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
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:
- KML files
- Circles
- Text overlays
- Also, if there's too much data, the image won't be shown at all (too many lines, areas, icons... so that the URL to the image is too long)
- The maximum size for the image is 640x640, if you use a bigger one, it will be scaled
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.