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.
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 - her should be code of custom CSS style in JSON format.
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:
http://www.mapstylr.com - 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.
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.