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 | ||
 |
|
|
Please make a version for redactor too.
ReplyDeleteHello,
ReplyDeleteIs it also posible to make a shape where everything outside the shape is dark. Somthing like http://www.wijkraadhintham.nl/wijkraad/plattegrond
@3dliving:
ReplyDeletecreating 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)
I hope you can add a "Inverted" checbox. That would be great!
ReplyDeleteHi Alfonso,
ReplyDeleteIs compatible with inline mode?
thanks
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.
ReplyDeleteThat'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)
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.
ReplyDeleteI'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.
ReplyDeleteI'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.
Nice plugin. Two questions:
ReplyDelete1. 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.
Hi Peter
ReplyDeleteThank 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
Is is hard to add MarkerClusterer to plugin?
ReplyDeleteIf 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.
ReplyDeleteIt's possible to use with Drupal 7 ?
ReplyDeleteHow do you install ?
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.
ReplyDeleteBesides 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.
I would like to use with Drupal, but i think probably don't function well. Isn't it ?
ReplyDeleteBuenas Josep,
ReplyDeletea 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.
I know how foolish I am, but I want to know how can I align center google map?
ReplyDeleteHi Jun
ReplyDeleteThe 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.
Today I got error
ReplyDeleteError: 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');
}
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.
ReplyDeleteHi there Alfonso,
ReplyDeleteHow 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.
Hi Dylan
ReplyDeleteThat'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
I got error after installed Chrome Plugin AddBlock.
ReplyDeleteGET 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.
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.
ReplyDeleteI 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.
Hi,
ReplyDeleteIs 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?
Hi Arnaud
ReplyDeleteYou 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
Hello,
ReplyDeleteDo 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?
Hello Thomas
ReplyDeleteI'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)
Thanks for the quick reply!
ReplyDeleteIf 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?
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.
ReplyDeleteTo 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)
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?
ReplyDeleteYou 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.
ReplyDeletehi,
ReplyDeletecan ı use .net
please tell me
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.
ReplyDeletePlease can you tell me if your plugin is compatible with Invision Board 4.x?
ReplyDeleteI 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.
I'm sorry but I don't use Invision Board, so I can't assure anything about it.
ReplyDeleteIf 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.
Thanks Alfonso
ReplyDeleteThis 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
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).
ReplyDeleteDon't waste your money with my plugin.
Regards
thanks for your time Alfonso
ReplyDeleteHI, 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
ReplyDeleteI've tested the demo at https://www.martinezdelizarrondo.com/ckplugins/googlemaps.demo4/ and the option to load the map on click works correctly there.
ReplyDeleteCan you provide more info to reproduce the problem?
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.
ReplyDeleteEl 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.
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
ReplyDeleteNo 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.
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.
ReplyDeleteHi
ReplyDeleteWe have been using ckeditor for some years now.. but having a problem turning your plugin on .
We have set googleMaps_ApiKey config set
config.googleMaps_ApiKey = 'AIzaSyAQTAehfBDhp........';
Do we have to define anything in the toolbar definitions to turn it on as we are not seeing the button
Hi Edward
ReplyDeleteYou need at the very least to add the plugin to your extraPlugins entry ('googlemaps' in lower case) and if you're defining a custom toolbar then add the new button: 'GoogleMaps'
This is explained in the docs\install.html, if you need further help please send me an email with as much info as possible
Help, I bought it, but I can't install it. Please make a video showing the installation step by step !!! Where I modify it: "3. Adding it to the toolbarset
ReplyDeleteAdd the 'GoogleMaps' (case sensitive) button to your toolbarset: "
Thank you.
I don't think that a video would help you because you would say that you integration is different, or that there's something that doesn't match your server.
ReplyDeleteYou can look at the source code of the demo page https://www.martinezdelizarrondo.com/ckplugins/googlemaps.demo4/ it's very simple and it shows a valid install.
Unfortunately this does not work on my system. I use PHP with the call through the plugin: MagicLine. So I have to integrate the plugin directly into the CK Editor. I've tried in several ways, but I couldn't. Could it be that if I email you my version of CK, with my tools set up, could you just set the configuration up for me? Thank you very much for your help and attention.
ReplyDeleteYes, email is usually the best option to figure out any issue.
ReplyDelete