How to Add Functional Google Maps to Your About Page

Using JS+ Google Maps Plugin for CKEditor

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.

Step 1: Install CKEditor Google Maps plugin

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.

Step 2: Add the map

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:

Button plugin on the CKEditor toolbar screenshot

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:

The map editor dialog screenshot

This is where we can configure the map.

Step 3: 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).

Adding pinpoints

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.

Adding text labels

The same way you can add text labels to the map using the text label tool.

Adding text labels screenshot

Adding lines

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:

Adding lines and shapes screenshot
Adding lines and shapes screenshot

Changing map view

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.

Changing map view screenshot

You can also apply weather and traffic layers using the corresponding button on the toolbar.

Adjusting map controls

Sometimes you may want to disable Google Map controls or turn off some of its capabilities. This can be done in the Settings dialog:

Settings dialog screenshot

Step 4: Preview the map and enjoy the result

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:

Preview the map screenshot

When you publish the page, the final result can look like this:

Final result of published page screenshot

Of course, you can add multiple different Google maps to your website using the CKEditor Google Maps plugin.