GoogleMaps

The GoogleMaps plugin for CKEditor allows to easily inserting Google Maps into your own pages using their API.
Those maps are correctly integrated into your page and you can customize most of their features.

Some Features of the plugin

  • Compatible with CKEditor 4.x
  • Use any map size
  • Static preview of your map inside the editor
  • Generate full active maps or static ones (for example for a mailing)
  • Use markers, lines, areas, circles. Set the color, width opacity...
  • Use your own markers icons
  • Use a KML exported from Google Earth (for example a GPS track that you recorded)
  • Edit the map as many times as needed until you have it exactly as want.
  • CDN friendly, you can deploy CKEditor in a single domain and re-use it from other domains as no iframes are being used.

Demo

You can test the plugin before buying it (in fact, you should!) and if you think that there's some feature missing, drop me a note. Test the Google Maps in CKEditor 4.

Videos

There are two videos that explain how to use the maps: Introduction to Google Maps plugin for CKEditor and Drawing shapes on Google Maps with CKEditor. But of course the best way to learn about the options is to play and use them.

Getting the plugin

Important: Before purchasing the plugin you must understand that it requires the usage of a Google Maps API key. You can follow the steps in this post to get one.

You can get this plugin under the same terms that my other paid plugins: the license for a single site is 10 euros and the OEM license for any site that you create is 50 euros. If you're a company that wants to integrate it into your product, the Enterprise license is 120 euros.
This license includes any future update and there are no additional costs.

Be aware that in order to be able to use the generated maps, your CMS should be configured to allow javascript in the generated content. For example, this plugin doesn't work with Invision Power Community unless you're happy using only the static maps.

Single site license OEM License Enterprise license
Price:  10 euros Price: 50 euros Price: 120 euros
For use in a single domain For companies that want to use the plugin in several domains created by them. This license allows to integrate the plugin in your product that you sell

Other plugins

You can find here a list of other plugins that I've created for CKEditor. Most of them a free and can help you to customize better CKEditor or get rid of little annoyances.

45 comments:

3dliving.dk said...

Please make a version for redactor too.

Cédric Schretlen said...

Hello,

Is it also posible to make a shape where everything outside the shape is dark. Somthing like http://www.wijkraadhintham.nl/wijkraad/plattegrond

Alfonso Martínez de Lizarrondo said...

@3dliving:
creating this plugin isn't easy so I'm not sure about what are the real possibilities to port it to other editors, but I will look at that when I finish some pending tasks.

@Cédric
Not at the moment, you would need to cheat and draw two areas next to each other (leaving the hole in the middle) and put a line around the border.
I will look into it, maybe I can find some easy way to manage that. (like a checkbox "inverted" in the area properties)

Cédric Schretlen said...

I hope you can add a "Inverted" checbox. That would be great!

Alfonso said...

Hi Alfonso,

Is compatible with inline mode?

thanks

Alfonso Martínez de Lizarrondo said...

The problem about trying to use it in inline mode would be that the scripts that generate the map are executed before you start editing the content (or even while editing), so that would create a horrible mess that would break the final page.

That's not to say that it isn't possible: if you create the editor and the fill it with the setData method then I think that it will work, but most of the people would fail so a general answer would be that no. (I might create one of these days a demo showing that, but I'm afraid that then people would not bother to really check how it works and start complaining that it doesn't work in their setup)

Craig McLeod said...

Glad you mentioned the inline mode, I am trying to use it in, inline mode. Will be sure to use set data. Just bought your Enterprise license. Much appreciated.

Alfonso Martínez de Lizarrondo said...

I've been testing a little and as I suspected the problem trying to edit an element which has some javascript inside of it is that it's already executed before CKEditor can start editing it, and that means that then the content is "destroyed" and the generated elements are mixed with the script and then nothing makes sense.

I'll write a post explaining this better, but a simple trick is to replace the scripts with x-script and then restore the HTML to its correct form as shown in http://www.martinezdelizarrondo.com/ckplugins/googlemaps.demo4/inlinesample.html
Of course that not might be the best option if you want a full "inline editing" experience, but in any case you will need to store somehow the original HTML without any modification and set it as the content of the editor when you initialize it.

Peter Schotman said...

Nice plugin. Two questions:
1. how can I prevent the title of a marker to be shown?

2. the close 'x' of the balloon is not correctly displayed, how can I correct that? I tried manipulating the abs positioning of the sprite, but did not succeed.

Alfonso Martínez de Lizarrondo said...

Hi Peter

Thank you
To prevent the title just clear it in its dialog.

For me the close button seems to work fine, sometimes the contents doesn't size correctly on first load, but that's a problem in the Google Maps and I'm not sure if it would be possible to fix it.

If you're talking about something else, I would need to see exactly what you're talking about.
Does that happens in all the browsers?
Does it happens in my demo?

Regards

Digi Neiker said...

Is is hard to add MarkerClusterer to plugin?

Alfonso Martínez de Lizarrondo said...

If you plan to add so many markers that you need to use the MarkerClusterer, I expect that you use some database to populate the data instead of adding all of them manually, and in that case you don't need my plugin at all.

Josep Maria Sala Iglesias said...

It's possible to use with Drupal 7 ?
How do you install ?

Alfonso Martínez de Lizarrondo said...

Installing any CKEditor plugin in Drupal is more complex than in other environments, you can check for a previous post that I published about it.

Besides that, this plugin inserts javascript in the content and by default Drupal will try to remove it so you will have extra problems with it.

Josep Maria Sala Iglesias said...

I would like to use with Drupal, but i think probably don't function well. Isn't it ?

Alfonso Martínez de Lizarrondo said...

Buenas Josep,
a ver si así me entiendes mejor.

La instalación de plugins de CKEditor en drupal es más complicado que en situaciones normales, que si estoy usando este u otro módulo, que permisos para aquí, permisos para allá, etc...

Yo no uso Drupal, lo poco que se lo publiqué hace tiempo y por tanto lo que debes hacer es intentar añadir a tu CKEditor cualquier plugin descargado directamente del listado de plugins y hacer que te funcione.
Si te falla entonces ten por seguro que este también te fallará.

Una vez que te funcione, lo que debes hacer es grabar contenido que incluya algo de javascript y ver si tu Drupal te lo respeta o no, y en caso negativo deberás buscar cómo configurarlo u olvidarte de este plugin.

Jun Park said...

I know how foolish I am, but I want to know how can I align center google map?

Alfonso Martínez de Lizarrondo said...

Hi Jun

The first problem is that sometime ago CKEditor disabled the "center" button on images, so you have to click besides it to center the parent div.
That works for images, but the "live" map won't be centered, so I've sent you a new version that takes care of that.

Stanislav Hloch said...

Today I got error
Error: Uncaught TypeError: Cannot read property 'style' of undefined
Url: /ckeditor/plugins/googlemaps/dialogs/googlemaps.js
Line: 398
function UpdateDimensions()
{
mapDiv.style.width = theDialog.getValueOf( 'Info', 'txtWidth') + 'px';
mapDiv.style.height = theDialog.getValueOf( 'Info', 'txtHeight') + 'px';

if (map)
google.maps.event.trigger(map, 'resize');
}

Alfonso Martínez de Lizarrondo said...

The demo at http://www.martinezdelizarrondo.com/ckplugins/googlemaps.demo4/ works correctly, so you should check recent changes in your project to find what's wrong as it doesn't seems to be something related to Google.

Dylan Davids said...

Hi there Alfonso,

How can I make the map responsive? I know it's possible, but I just don't know how to do it with the plugin. Hope you can help me.

Alfonso Martínez de Lizarrondo said...

Hi Dylan

That's available in the development version, but I've been sidetracked by many things and I still haven't released for everyone.
Send me a mail and I'll send you back the 3.5.8 version

Stanislav Hloch said...

I got error after installed Chrome Plugin AddBlock.
GET googlemaps.png net::ERR_BLOCKED_BY_CLIENT
And your plugin icon is not visible.
I found solution: I renamed icon to maps.png, changed js code and works well.
Please change it on your site to next release please.

Alfonso Martínez de Lizarrondo said...

I could certainly rename that, but I think that it would only delay bigger problems. If you have an ad-blocker configured to block "googlemaps" then it seems logical to think that it's being too aggressive and it could also block other parts of the plugin or the normal Google Maps code and then when your visitors try to view your page with that ad-blocker they won't see your content.

I would advise you to find out what's the rule that it's triggering the block and report to its maintainer that this kind of URL should be allowed.

Arnaud Lepeltier said...

Hi,

Is it possible to edit a Google static map image included in the html to edit (in inline mode)?
Are there any special marker that should be added ("data-cke-saved-src"?) before initializing CKEditor?


On a screen with small height the "Ok"/"Cancel" buttons are not accessible.
is it possible to put them on top of the dialog, or make the dialog resizable?

Alfonso Martínez de Lizarrondo said...

Hi Arnaud

You should be able to edit a static map image without anything special, the problem for inline editing are live maps because they execute a lot of javascript that changes all the DOM, but static maps are simple images without anything out of the ordinary.

The position of the OK/Cancel buttons is set by the CKEditor skin, putting them on top would seem strange.
The dialog is already resizable, but of course, the resizing corner is the bottom right, so if you can't see the buttons then you can't see that corner.
I don't know what kind of solution I can suggest you

Thomas Lutterman said...

Hello,

Do you have any documentation for the 'Load map: By a Script' option in the plugin? I haven't been able to find what script to call to initialize the map.

I'm going to have multiple maps hidden on a page, and would like them to load individually when I make them show. Is this even possible?

Alfonso Martínez de Lizarrondo said...

Hello Thomas

I'm sorry, that it's not clearly documented.
You just have to call the initGmapsLoader function to init the maps on the page, (after the page is ready of course)

Thomas Lutterman said...

Thanks for the quick reply!

If I have more than one map on the page, is there a way to load a specific map on a page instead of loading all of them at once?

Alfonso Martínez de Lizarrondo said...

Not by default. The main reason to avoid loading the map by default is to prevent the load of the GMaps libraries, not to choose if you want to init only one map.

To do it that way, before caling initGmapsLoader, clone the window.gmapsLoaders array and set it as a new array with only one item, the function that you want to execute when the libraries are ready.
So check which method initializes each of the maps and use it (the methods are called CreateGMap + id)

k said...

Is there any limitation on google side? for example: How many map request we will done with this script in realtime? I know there is no API Key needed in this case. Could it be, if 20 or more user view the map (or more maps) on the same time, then google put in a captcha? (or anything else?). if this would true, is it possible to combine the script with an api key without huge code changes?

Alfonso Martínez de Lizarrondo said...

You can read the Google Maps api docs to get the info about the limits, benefits of using an API key and then how to pay for anything extra that you want.

mehmet said...

hi,
can ı use .net

please tell me

Alfonso Martínez de Lizarrondo said...

Yes, this is a client side plugin written in Javascript. As long as you're able to use CKEditor and install additional plugins you can use this one.

Katia Banci said...

Please can you tell me if your plugin is compatible with Invision Board 4.x?

I found this statement in the invision board support forum:

Posted 16 Jun 2015
On 1/4/2015 at 11:37 AM, Nathan Explosion said:
Any plugin compatible with CKEditor 4.4.7 can now be added and used with IPS4.

Mhm, I can't get this plugin working. The author of the plugin told me after I sent him some code examples, that the editor isn't using the getData() API. Sure that every plugin should work? oO

Quote
In that code I see the data-cke-* attributes, that means that you're reading the content of the editor directly and not using the getData() api.
In order to properly create the maps you must get the content using editor.getData() and not any other method to read the inner HTML of the editor.

Alfonso Martínez de Lizarrondo said...

I'm sorry but I don't use Invision Board, so I can't assure anything about it.
If you point me to a demo I can take a basic look, but if they have done some strange integration then it might not be obvious.

Katia Banci said...

Thanks Alfonso

This is a page where you can see the editor: https://invisionpower.com/forums/forum/305-pre-sales-questions/?do=add

This is a live demo: https://invisionpower.com/demo (but you must provide an email address to use it).

When in the control panel you must go to Costumization > Editors > Toolbars > Add Button

thanks for your time

Alfonso Martínez de Lizarrondo said...

I'm sorry, but although editing of the map works correctly, once the post is saved the data is removed and the image is linked automatically to the full image (even if it's the same size).

Don't waste your money with my plugin.
Regards

Katia Banci said...

thanks for your time Alfonso

Sam Ra said...

HI, how do i get the map with zoom controls and movement rather than just static map? I set options as on click so when user clicks map should become interactive. I get js error in console saying : cannot read 'parentnode' property of null

Alfonso Martínez de Lizarrondo said...

I've tested the demo at https://www.martinezdelizarrondo.com/ckplugins/googlemaps.demo4/ and the option to load the map on click works correctly there.
Can you provide more info to reproduce the problem?

Nacesprin said...

Hola. He visto que con ckeditor 4.5, cuando agrego un mapa, le doy a ver HTML (del ckeditor), y vuelvo a darle para ver el editor, y vuelvo a darle de nuevo al HTML del ckeditor, observo que va duplicando el código de google maps en el editor. Va añadiendo duplicidades.

El fallo está en plugin.js, en la linea 1408-1414 en el if...:

if (oMap && oMap.generatedType>1){

donde resulta que entra permanenemente y agrega codigos repetitivos. Queria saber si habría alguna solución al respecto.

Gracias.

Alfonso Martínez de Lizarrondo said...

Esa linea se corresponde ahora con la 1340, por lo que está claro que usas una versión desactualizada que no está adaptada para CKEditor 4.5

No se con que cuenta de correo compraste el plugin, por lo que no puedo enviarte una actualización, pero está claro que no has recibido las actualizaciones desde hace timpo.

Nacesprin said...
This comment has been removed by the author.
kathy belpaeme said...

Dear Alfonso i can't seem to find your contact details on the site can you please contact me @ pieterm[at]vliz.be i have a License for ckeditor googlemaps plugin but can't download the latest version.