Simplified Google Maps plugin documentation

Intro

Simplified Google Maps (SGM) is a very unique plugin, it will allow you to easily create, administrate and customize maps at the WordPress site. Most Google Maps WordPress plugins require that you should master some advanced web development skills. But not anymore! I have created a plugin that handles all the hard work for you, so that you can focus on the end result.

You can manage maps via special  Maps section in the WordPress admin panel as shown below

Features

The main focus is to provide those features that brings real value to the customer and that are the most likely to be used. We took special attention on the product usability and how to make it really easy to use. The Simplified Google Maps plugin allow user easily to:
  • Live administrate all your maps - this means that all actions user takes are instantly visible, no more "click to preview".
  • Globally administrate maps - all maps can be defined and maintained in one place, but used everywhere.
  • Add as many places as you want - each can be individually customized.
  • Move places on map by drag and drop or by directly specifying the coordinates.
  • Customize the place icon - we provide 90 custom made icons, but if this is not enough
    user can upload his icon.
  • Add place detail rich content, you can use: simple text, images, links, videos etc.
  • Focus map on any location by simply searching the desired address.
  • Full customization of map look and feel.
  • Configure the map basic settings - map size, zoom, type, custom overlay (info box) etc.
  • Street view mode - this feature combines traditional map with street view.
  • Direction - this feature indicates step by step how to reach any specified location.
  • Full screen - for more usability and engagement switch map to full screen and back at
    any time.
  • And yes... No coding skills required! It's just works!

Overview

One of our main goals in map plugin was to make user work more effective, the interface is structured in two main sections.  First section is showing the list of all maps defined in system. Second section is the place where the effective map administration is done. Let’s take them separate.


Maps List

The list of maps is reachable by going to  Maps → All Maps menu entry. As it can be seen on screenshot below, here we got the maps list and the  Add new button. The list shows all maps defined in our system, basically the name and the shortcode columns are displayed. What is important to keep in mind is the shortcode, this will be used later on page, post or a custom zone in WordPress theme where we want to display the map.

Adding map to post/page is really easy see screenshot above, first go to the map list and copy the shortcode of the map you want to display. Edit the post/page where you want to show the map and simply paste the shortcode. After you have done all the modifications don’t forget to save; now the map should be visible on frontend.

Display Map on Page


Display Map in a Custom Zone In WordPress Theme

There are special situations when we have to display the map on a zone that doesn’t belong to the post/page region for e.g. the footer. This can be achieved by explicitly evaluating the shortcode using a small piece of code; an example can be seen on screenshot below. The does the shortcode evaluation and display the map.


Create/Edit/View/Delete Map

We want to make the process of creating/editing the map really handy and fast. New map creation is achievable form two places,  Maps →  Add New menu entry or from  Add New button from map list top. For editing/viewing/deleting an existing map, click the link that is visible on map list mouse over, see screenshot below.


Map Editing Screen

The main goals that we had in mind when we created the administration screen was that it should be easy to use, intuitive and fast, we structured it in four main regions:

Real-time preview of the map

Toolset that will be used to perform various
operations

Here we change the content of our places

Here we have the tools for saving the map, also you can see any error/warning that may appear 

Place Management

The richest feature that SGM explores is the map places management; we add special attention on this section to make it very natural and easy to use. The Place can be managed from the Places tab, from map toolbar; here we got a list with all map places.
For each place it can be defined:
  • Name - identifier for each place on the map
  • Location - map coordinates of the place
  • Pin animation - add an animation effect on pin
  • Icon - place icon
  • Rich content - the content that will be showed on click pin


Add/Remove Place

Adding new place can be achieved either by clicking on Add place button, this will add a new place and position it in the center of map (see screenshot above), or by searching a specified address; this will focus map on specified address and add a place there (see screenshot below). A place can be removed by clicking the small right corner x from the list of places.

PLACE NAME
- Place name represent the label displayed on map pin mouser over. Attention, this is a
required field, if missing the map cannot be saved.
PLACE POSITION
- Place position can be changed by simply drag and drop the pin on map or by manually
modifying the location fields. Attention, if one place location is invalid the map cannot be saved until this is corrected.
PLACE ICON
- Place icon can be customized, you can select one of the existing icons shipped with the
map or you can upload a custom image form media library. To use a shipped icon, go to “Predefined icons" select (see the second screenshot below) and choose one icon from the existing list (90 custom made icons). To upload a custom image you need to use the “Add icon" button (screenshot below), this will open the upload popup.


Place Details

Place details represents the pin tooltip, it allows you to be as creative as you want, it supports rich text, images links, video, etc (see screenshot below). The rich editor will always show content of focused place.


General Map Settings

We want to simplify the customization of map setting so we grouped all essential settings, sceenshot below, in the Settings tab of main toolbar. Here we can change the map size, map center, zoom and type.
All modification that are performed here are visible instantaneous in the map canvas.
Note: map center and zoom level can be set also by moving and scrolling up/down the map canvas, the associated fields get updated automatically.
Note: map width and height must be some valid values in pixels, if this fields values are invalid map cannot be saved. Another important aspect is that these fields are not affecting the map canvas; the result can be seen in map preview mode or in the end result on frontend.


Street View

SGM come with Google street view integration out of the box this can be enabled by selecting STREET in Map mode from Settings tab of main toolbar. We wanted to take this functionality further so we created a hybrid where we integrated a small navigation map on left top screenshot below. The navigation map can be resized and any operation that user would perform on the traditional map works here too.

Another feature that makes the street view far more valuable is that places can be added on street with the same behavior as we are used to, see screenshot below


Toggle Full-Screen

SGM enhances the default Google maps controls with an additional Toggle full-screen control that toggles map dimension from fix size to maximum size of browser window (see screenshot below) this way you can see more details about the wanted location.


Driving Direction (Route)

Direction is a feature that allows guiding of end user to a specific place on map (destination) from any arbitrary location (origin). By default this feature is disabled but it can be enabled from Enable direction in Settings tab of main toolbar (see screenshot below).
By enabling direction, an additional button is added to map controls; this button will show the direction panel.
Direction panel lets end user select the destination place on map, select the preferred traffic method for e.g. bicycling and the starting point. Once this information is set, the route will be showed on map as it can be seen on screenshot below.

Complementary to the default direction feature there is the possibility to show some intermediary steps, represented by the purple pins. This can be enabled from Show steps in Settings tab of main toolbar. Each pin contains direction indication; this information is showed also in a separate list under the direction panel (see screenshot below).


Map Look and Feel (Style Tab)

SGM takes advantage of Google styling API, allowing user to create rich experience by customizing maps look and feel. The maps look and feel styling is available on Style tab of main toolbar (see screenshot below).

The map styling is individual for each map and works in a composite manner, this means that each entry in this tab is an individual styling attribute (map element).
To add new styling attribute press Add styling element button then select the Feature type, Element type and the desired Color.
Feature type basically represents the map element that is customized for e.g. this may be the map roads.
Element type represents an individual characteristic of feature for e.g. this may be label text.
The composite map styling is really flexible and powerful. Sreenshots below shows some samples of map styling customization that can be achieved this way.


Custom Overlay (Info Box)

There is certain scenario when the default style of place info box is not fitting the user needs. SGM has a mechanism that overrides the default and allows user to add his custom styling. The custom overlay can be enabled checking Enable custom overlay from Settings tab (see screenshot below).
SCM comes with an out of the box style for custom overlay but user can customize further by modifying map scss file and recompile them.
To update the overlay style:
• Open /cetabo-googlemaps/css/partial/common.scss
• Search for .cinfobox class
• Perform modifications
• Save file
• Recompile /cetabo-googlemaps/css/frontent.scss and /cetabo-
googlemaps/css/backend.scss using for e.g. saas command line tool • $ sass --watch frontend.scss
• $ sass --watch backend.scss
Still there is one more detail to take care of: this kind of modification gets applied globally to all maps that use the custom overlay, so be wise.

Still need help? Contact Us Contact Us