Bienvenue sur Geeklog France, anonyme 07 février 2016 - 11:24

googlemaps plugin pour FCKeditor

  • Par
  • Lu 10,809

Voici la mise à jour pour le CMS geeklog du plugin googlemaps pour FCKeditor. Cette version permet à un administrateur ayant les droits d'édition des articles (story.edit) d'ajouter une carte google à ses articles ou aux pages statiques.

La taille des carte est paramétrable, ainsi que le zoom. On peut y ajouter des repères (markers) et y tracer des lignes afin de matérialiser des zones ou des parcours.

Pour installer ce plugin, décompressez l'archive dans le dossier public_html/fckeditor/editor/plugins. Déclarez le plugin dans le fichier de configuration public_html/fckeditor/myconfig.js et ajoutez votre clef googlemaps que vous obtenez ici . Ajoutez le bouton aux barres d'outils. Videz le cache de votre navigateur, c'est en place. 

Demo | Dowload googlemaps plugin

Installation :

1. Copying the files
Extract the contents of the zip in you plugins directory.

2. Adding it to FCKeditor
Now add in your 'public_html/fckeditor/myconfig.js' configuration file the following line: FCKConfig.Plugins.Add( 'googlemaps', 'de,en,es,fr,it,nl,no,zh') ;

3. Adding it to the toolbarset

Add the button 'googlemaps' (lowercase) to your toolbarset:


FCKConfig.ToolbarSets[&quot;editor-toolbar2&quot;]<br />

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:

For example the key for "localhost" is

Once you get the key, you must set it in in your 'public_html/fckeditor/myconfig.js' configuration file:

FCKConfig.GoogleMaps_Key = 'ABQIAAAAlXu5Pw6DFAUgqM2wQn01gxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSy5hTGQdsosYD3dz6faZHVrO-02A' ;

Note: if you leave an empty string then the toolbar icon won't be shown.

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!

All these values can be set in the 'public_html/fckeditor/myconfig.js' 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 Insert GoogleMap should be ready to use.

Usage :

Only users with story.edits rights can use the plugin. Press the Insert GoogleMap button in the FCKeditor toolbar, and a new dialog will open allowing to configure the parameters of the map that you want to show.

  • Map dimensions : With these inputs you can control the dimensions of the map as they will appear in your final page. You can also drag and resize the placeholder image that appears while you are in the editor.
  • Map zoom : You can control this way the level of zoom of the map. You can use either the top dropdown or the embeded + and - controls in the map.
  • Map center : These inputs set the center of the map. You can also use the arrow buttons embeded in the map or even drag and drop the map itself.
  • Location search : Input here the location that you want to search and if it is properly found then the map will re-center automatically and add a marker to that point. To be able to find what you want separate each item with a comma: "street, city, country"
  • Add Marker : By pressing this button you can add a marker at any place in the map. It's properties window will open and you can change the text or delete the marker. You can the placement of any marker dragging it around.
  • Marker text :This is the text that will appear if the visitor clicks on the marker (you can test it in the Map tab).
  • Line : With this tab you can drag a polyline accross the map, and adjust each of its points dragging the markers that appear while you are here.

Additional Info :

When you go close the dialog, a placeholder item will be added to your content representing the current map. It will have the proper dimensions and a black border around it, and it will feature a Google Maps logo at the center.
You can click to select it and drag one of the corners to resize it, but remember that the center of the map and the position of the marker won't change, so you might need to check again in the editing dialog that everything is fine

You can add to your page as many maps as you want, the system is prepared to work with various maps at the same time.

To edit an existing map you can select it and then click again the toolbar button, or use the entry in the context menu, or even just double click it. Whatever you want.