Google Maps Markers for ZOO

Getting started

This is a detailed documentation on Google Maps Markers for ZOO - an element for ZOO (popular Content Construction Kit for CMS Joomla!) displaying Google Maps. The element have widely settings and easy configurable structure and might highlight catalogue or website based on Joomla! and ZOO.


Google Maps Markers for ZOO can be installed as typical Joomla! extension via Extension manager. Go to Back-end > Extension Manager > Upload package file tab > Upload & Install Joomla extension.

When the package is successfully installed, you have to go to ZOO administration panel and set up the element.


Open ZOO start page in Joomla! back-end and open Apps manager (click on configuration icon):

Then select your App (i.e. Blog) where you’d like to add Map element.

In the left side you’ll see a first column called Name. Make sure which name you’d like to configure the element for. Let it be an Article. Move cursor on this name and above it you’ll see Edit elements link. Click on it.

Now the element manager is appeared. At the right side you’ll find Element Library and group called NorrNext. Click on Google Maps Markers item there and the new element just been added and appeared in left side. Let’s examine its settings.

If you are not familiar how to manage ZOO elements, here is a guide: Assigning ZOO elements to Apps

Google Maps Markers for ZOO params:

Google Maps Markers for ZOO - settings
  • Name - the name which wil be displayed in back-end (when admin create article there the element will have this name)
  • Description - Description which will be displayed in back-end (the element have this description when admin create article and move cursor on element name)
  • Access Level - Access level
  • Repeatable (No/ Yes) - No if there is the only map marker and Yes - if you need multiple markers.
  • Map Height (px) - height in pixels
  • Map Wight (px) - with in pixels. If set 0, you’ll get 100% width.
  • Map Scroll Whell - scaling wheel
  • Map Zoom - default scale from 1 to 20
  • Map Min Zoom - minimal scale from 1 to 20
  • Map Max Zoom - maximal scale from 1 to 20
  • Disable Default UI - Disable all UI elements / visual elements at map
  • Disable Double Click Zoom - Disable map zoom on double click
  • Map Type Control - Element Map type control
  • Map Type Control Style - Style of map type control; default - map automatically choose which style to be used according screen width, dropdown list or horizontal list, but it’s possible to set up params manually or one or the other
  • Map Type Control Positon - Map Type Control Positon on the map
  • Map Type Hybrid (No / Yes) - Use or not to use this type of map
  • Map Type Roadmap (No / Yes) - Use or not to use this type of map
  • Map Type Satellite (No / Yes) - Use or not to use this type of map
  • Map Type Terrain (No / Yes) - Use or not to use this type of map
  • Map Type Default - Default type / style of the map
  • Pan Control - Control element (rounded icon with arrows)
  • Pan Control Position - Position of this control element
  • Zoom Control - Zoom control - The up and down slider (So called Plus / Minus element)
  • Zoom Control Style - Style of this element. Small or large, default - according screen width the map automatically determines which style to be used
  • Zoom Control Position - This element position
  • Scale Control - Little text below the map - 500m as a scale units on printed maps
  • Street View Control - Element of Street View Control - kind of human sprite which you may move on streets and look around the streets
  • Street View Control Position - Position of this view control on the map
  • Draggable - Use the event - turn map int draggable mode, so you may drag’n’drop the map with pushed mouse key
  • Custom Style - Use or not to use custom CSS style for a map
  • Custom Style Name - name for custom CSS style
  • Map Style Json - there should be code of custom CSS style in JSON format.
  • API Key - enter your Google Maps API key. Your site domain must be added in Google Cloud Platform Console.

As of June 22, 2016 Google Maps V3 no longer supports keyless access (any request that doesn't include an API key), so you need to get an API key for every domain which has never had a Google Map on it before.

Name of custom style will be displayed in Map Type Control mode to have ability to switch on another style.

Note: if Custom Style is enabled, it’ll be displayed while web-page is loading, but if it will be disabled in this moment, a standard Joomla! error message will be appeared.

How to write Custom Style in JSON?

You have to prepare code according JSON format structure and specifications. Here are useful links:

  • - you may take any of predefined styles, copy it and past it in Map Style Json field.
  • - here you may generate a style manually, copy it and paste in Map Style Json field.
  • - another example of predefined styles. Choose any of preferable style, copy it and paste to Map Style Json field of Google Maps Markers for ZOO element.

Most of the styles from 3rd party resources that mentioned above are licensed under creative commons and are completely free to use. And of course, you may write own JSON style.

Element settings in edit mode of content item

As well as you added a new element to the App and successfully configured it, it’s appeared in content item edit mode.

Google Maps Markers for ZOO - element in content item edit mode
Element in content item edit mode

Google Maps Markers for ZOO - element settings in content edit mode
Google Maps Markers for ZOO - element settings in content edit mode

Useful information

Specify the map centre. You must specify the center of the map. Take a look if the map have no centre, you’ll get standard error:

You must specify the center of the map; Latitude and Longitude, for example: -34.397, 150.644 - it’s actual if you have at least one marker.

Title of markers as init param. Each marker should have title. If the title is not specified, the marker won’t be displayed like you have no marker. In other words, you may temporary disable markers display at front-end without removing markers from back-end - just do not specify title and such marker will be stored in back-end and not be shown at front-end. Title is kind of init, so to say. The title itself is for internal usage in back-end which help webmaster not to be confused with settings. And you may drag and drop these markers and change its order as you need.

Markers removal. Also you may remove any marker. Such option is available when you move mouse cursor on marker and see the remove icon.