Yandex Maps Markers for ZOO

Getting started

This is a detailed documentation on Yandex Map Markers element for ZOO. The element have widely settings and easy configurable structure and might highlight catalogue or website based on Joomla! and ZOO.


Yandex Map Markers element 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 Yandex Map Markers item there and the new element just been added and appeared in left side.

If you are new to ZOO CCK, please read this tutorial: Assigning ZOO elements to Apps.

Let’s examine settings of Yandex Maps for ZOO:

Yandex Map Markers element params:

Yandex Maps Markers for ZOO
Element Configuration
Yandex Maps Markers for ZOO
Element Settings in item edit mode
  • Repeatable - [No / Yes] - Set Yes if you need multiple element instances within one item
  • Map Language - Supported languages: [English / Russian / Ukrainian / Turkish]
  • API Key - [sting] - Enter Yandex Map API key
  • Debug - [No / Yes] - Special debug mode to load js map (for developers)
  • Map Height (px) - Map Height in pixels
  • Map Weight (px) - Map Weight in pixels. Set to 0 if you need 100% width (full screen).
  • Default Map Zoom - Set Default Map Zoom
  • Map Max Zoom - Set Map Max Zoom
  • Map Min Zoom - Set Map Min Zoom
  • Map Default Type - Default Map Type: [Map / Satellite / Hybrid / Public Map / Public Map Hybrid] [2]
  • Map Draggable - [No / Yes] - Ability to Drag Map with Mouse
  • Map Double Click Zoom - [No / Yes] - Zoom the Map with Double Clicking on Mouse Left Button
  • Map Scroll Zoom - [No / Yes] - Map Scroll Zoom (scroll)
  • Map MultiTouch Zoom - [No / Yes] - Map MultiTouch Zoom
  • Right Mouse Button Magnifier - Right Mouse Button Magnifier [No / Yes]
  • Left Mouse Button Magnifier - Left Mouse Button Magnifier [No / Yes]
  • **Map Control Panel:**
    • None - No defined width / height params.
    • Medium Map Default Set - Medium Map Default Set for Medium Maps (from 300 to 1000 pixels in width)
    • Small Map Default Set - Small Map Default Set for Small Maps (less than 300 pixels in width)
    • Large Map Default Set - Large Map Default Set for Large Maps (more than 1000 pixels in width)
    • Custom Control Panel - Here you can set up your custom width/height params.
  • Geolocation - [No / Yes] - Allow to position user's location by calling a standard geolocation function of your browser or / and by user's IP address.
  • Search - [No / Yes] - Search of geographical objects by name, address or by geo coordinates.
  • Size Control Panel Search - Search Element Size [Small / Medium (Default) / Large]
  • Route Editor - Route Editor [No / Yes]
  • Traffic - Enable Traffic on Map [No / Yes]. This element has 2 views: Detailed (for Large Maps) with extended information and with ability to see statistics and forecast and Small (for Small Maps) which has a button to enable / disable road information.
  • Size Control Panel Traffic - Select the size of Control Panel Traffic [Small / Medium (Default) / Large]
  • Type Selector - Type Selector [No / Yes]
  • Size Control Panel Type Selector - Size Control Panel Type Selector [Small / Medium (Default) / Large]
  • Fullscreen - A button to enable fullscreen mode [No / Yes]. The Map will be displayed on all browser window after clicking on this button.
  • Zoom - [No / Yes] - Changing the zoom ratio.
  • Size Control Panel Zoom - Size Control Panel Zoom [Small / Medium (Default) / Large]
  • Ruler - Display Ruler [No / Yes]. Displays the scale segment on the map and the Ruler behavior button. Allows you to measure the distance between objects.

Adding Markers

If you have set Repeatable to Yes in element options, then you can add multiple markers on the map.

Yandex Maps Markers for ZOO
Adding Markers in ZOO item

The Map Marker has the following params:

  • Draggable - Draggable mode [No / Yes] [1]
  • Participation in the itinerary - Enable this param if you want to use marker as a part of the route.
  • Name Route - Optional param. It might be very useful if you need to create multiple and independent routes. In such case you just set the route a name and use this name to group markers that are the part of the route. If you will not set the name for the route, the name will be generated automatically and assigned to all route markers and it will make the route.
  • Type Icon - Type Icon [Icon / Dot Icon / Circle Icon / Circle Dot Icon]
  • Color Icon - Set Color for Icon. You can use the same symbols allowed in CSS (rgb, hsl, hex)
  • Tooltip - A tooltip when you hover cursor on the icon. HTML tags aren't allowed.
  • Balloon - Description that appears when you clicking on marker icon. You can use HTML tags here.

Determining the coordinates on the map (in Russian) - here you can enter location name and get coordinates or vice versa.

!IMPORTANT! Limitations:

Despite the fact we have released settings for building API query, there are some limitations:

  • 1. You are not able to use multiple maps on the same page that have different values for the following params: Map Language, API Key, Debug since it is contradicts the principles of the map usage. Hovewer, you can change these params on different pages. If you are using multiple maps on the same page, then the following params: Map Language, API Key, Debug must be the same for all maps used within one page.
  • 2. We do not recommend to use more than 10 routes within one page.
  • 3. Please read Yandex Maps Terms of Use before the usage.