Google Maps logo

Google Maps plugin

Insert Google Maps onto web pages
Google Maps screenshot
Google Maps screenshotInsert message on the map screenshotSearch place screenshotSettings of Google Maps screenshotInsert text on map screenshotPut traffic info on map screenshot
Google Maps logo

Google Maps is the plugin for easy inserting and editing Google Maps into the pages. You can specify your office location, draw the route to it, place all of your travel targets or anything else.

The add-on is fully compatible with TinyMCE and CKEditor.

The main features of this add-on are:

  • Changing any of the map you have inserted before
  • Customizing view size, and zoom of the map
  • Configuring Google Map type (Roadmap / Sattelite / Hybrid / Relief)
  • Semantic search for objects by street addresses, names, etc.
  • Layers support
  • Putting points, routes, areas onto the map
CKEditor 4 logo CKEditor 4
TinyMCE 6 logo TinyMCE 6
TinyMCE 5 logo TinyMCE 5
TinyMCE 4 logo TinyMCE 4

Install Google Maps plugin in CKEditor 4

Download Google Maps
ZIP archive of Google Maps for CKEditor 4

Then do these simple steps:

  1. Copy GoogleMaps directory to ckeditor/plugins/.
  2. Edit CKEditor config and add GoogleMaps to extraPlugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Using config file
Using initialization script

Example of configuring with config.js

If you prefer to edit config.js config file of CKEditor or when your CKEditor initialization code is placed inside some non-editable part of CMS, make these changes there:

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "GoogleMaps";
};

Example of configuring inside initialization code

Some CMSs do not use config.js file and let to edit CKEditor initialization script only. Do this changes there:

CKEDITOR.replace("#editor", {
    extraPlugins: "GoogleMaps",
});

Install Google Maps plugin in TinyMCE 6

Download Google Maps
ZIP archive of Google Maps for TinyMCE 6
Self-hosted TinyMCE 6
Cloud TinyMCE 6

Install the plugin to TinyMCE 6 hosted on your server

  1. Copy GoogleMaps directory to tinymce/plugins/.
  2. Edit TinyMCE config and add GoogleMaps to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "GoogleMaps",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 6

  1. Copy GoogleMaps directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Google Maps plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add GoogleMaps to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "GoogleMaps",
    external_plugins: {
        "GoogleMaps": "http://example.com/public/GoogleMaps/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Google Maps plugin in TinyMCE 5

Download Google Maps
ZIP archive of Google Maps for TinyMCE 5
Self-hosted TinyMCE 5
Cloud TinyMCE 5

Install the plugin to TinyMCE 5 hosted on your server

  1. Copy GoogleMaps directory to tinymce/plugins/.
  2. Edit TinyMCE config and add GoogleMaps to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "GoogleMaps",
});

Refer to TinyMCE add-ons installation manual for more details

Install the plugin to cloud edition of TinyMCE 5

  1. Copy GoogleMaps directory somewhere on your server where it can be accessible by a link.
  2. Specify the location of just copied Google Maps plugin adding key-value pair in external_plugins TinyMCE config parameter.
  3. Edit TinyMCE config and add GoogleMaps to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample cloud TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "GoogleMaps",
    external_plugins: {
        "GoogleMaps": "http://example.com/public/GoogleMaps/plugin.min.js",
    },
});

Refer to TinyMCE add-ons installation manual for more details

Install Google Maps plugin in TinyMCE 4

Download Google Maps
ZIP archive of Google Maps for TinyMCE 4

Then do these simple steps:

  1. Copy GoogleMaps directory to tinymce/plugins/.
  2. Edit TinyMCE config and add GoogleMaps to plugins parameter.

All the buttons this plugin will add to your toolbar automatically.

Example

Here you can see sample TinyMCE initialization code with config inside it: 

TinyMCE.init({
    selector: "#editor",
    plugins: "GoogleMaps",
});

Refer to TinyMCE add-ons installation manual for more details

Reviews

Be the first who will write a feedback for this plugin.

Tell a friend about Google Maps

Send