Statistics claims that a map clearly displaying driving directions to your office or an interactive map showing geography of your business improves overall performance of your website. This short tutorial will teach you how to add your own custom Google Map to your Contacts or About page if you use CKEditor to add content on your website.
For the sake of this example, we will demonstrate how to use CKEditor Google Maps plugin with Joomla 3. However, the principle is the same for any CMS. And you can also use the TinyMCE version of the plugin with the same result. Ok, here we go.
Briefly, you need to copy the plugin into the plugins folder of your CKEditor installation and enable the plugin and the toolbar button in the config.js file. Please refer to this tutorial for detailed instructions on installing plugins to CKEditor.
Ok, the plugin is installed and you can see its button right here, on the CKEditor toolbar whenever you edit any content on your website:
Let’s add a custom Google Map to the example About page of the fictional Mammoth Software company. Click the toolbar button. This opens up the map editor dialog:
This is where we can configure the map.
First of all, you need to specify the location you want to display on the map. Type the name of a city or specify a more specific address or geographic object in the search box. The map will automatically center on the given location.
You can configure the map using the left toolbar. Specify the width and the height of the map and the zoom level (it adjusts automatically as you zoom in and out using the mouse wheel).
Add a pinpoint to display the location of your office, store, local rep or any other facility on the map. The picture above shows how this looks. Type the text you want to display when the user point the pinpoint with the mouse and click OK.
The same way you can add text labels to the map using the text label tool.
Lines and shapes can be used to visually represent travel directions, driving directions, are of coverage and so on. Click the corresponding buttons on the toolbar to add new lines to the map:
With CKEditor Google Maps plugin you can make the map look as a roadmap or as a satellite view if this is preferable for some reason.
You can also apply weather and traffic layers using the corresponding button on the toolbar.
Sometimes you may want to disable Google Map controls or turn off some of its capabilities. This can be done in the Settings dialog:
Once you have finally tuned the map and made it look like you want, click the green OK button to save it and insert to the CKEditor:
When you publish the page, the final result can look like this:
Of course, you can add multiple different Google maps to your website using the CKEditor Google Maps plugin.
