This section allows you to add Maps with lots of customization options. You can have different Maps with different customized settings for vMap. To manage Maps, please go to vMap => Maps (or go to Dashboard and click on Maps icon). On the page, you will see list of Maps which you created and you will be able to add/edit/delete/publish/unpublished Maps using the buttons on toolbar.
To create a Map, you can simply click on New button in the toolbar and fill-in necessary information.
The Map Settings is divided into various sections to make it easy to understand.
- Map Configuration Section.
- Map Center Options Section.
- Control Options Section.
- Marker Options Section.
- Info Window Options Section.
All settings here apply to this Map of vMap Component. Be sure to review all the options here when setting up a Map to ensure that the all necessary settings of a Map matches what you want. There are many parameters, the meaning of each parameter is explained on their tooltip, and they are easy to understand. I will just explain the meaning of important parameters in the below section:
Map Configuration Section
In Map Configuration Section, you can set basic parameters of Map like Width, Height, and Map Type etc.
The table below list the important fields and its meaning which you need to enter when you create Map.
| Property | Description |
|---|---|
| Type of Map |
Choose one from 05 map types as per your requirement
|
| Map Title | Enter the title of the Map |
| Google Map Width | Enter the Google Map’s Width. You can set map width Unit either in pixels or in percentage. |
| Google Map Height | Enter the Google Map’s Height. Unit: pixel |
| Published | Set the Published field to YES. |
Map Center Options Section
In Map Center Options Section, you can set map center position using Latitude-Longitude, Address or simply by dragging the marker on Map.
| Property | Description |
|---|---|
| Address | Enter address of your location map. |
| Latitude | Enter the latitude here to set coordinates of your location |
| Longitude | Enter the longitude here to set coordinates of your location |
| Zoom | Enter a size for zooming. Default size is 12 |
| Set Center | After entering either Address or Coordinates (Lat, Long), simply click on this button to set the center point of your location on the Map and vMap will find it automatically. You can also set the center by simply dragging the map. |
Control Options
The control options section provides various parameters which allows you to control your map as per your requirement.
Several controls are configurable, allowing you to alter their behavior or change their appearance. The Map Type control, for example, may appear as a horizontal bar or a dropdown menu.
The Map Type Control may appear in one of the following STYLE options:
- HORIZONTAL BAR - Displays the array of controls as buttons in a horizontal bar (one button for each map type).
- DROPDOWN MENU - Displays a single button control allowing you to select the map type via a dropdown menu.
- DEFAULT - Displays the "default" behavior (which depends on screen size).
The Zoom Control may appear in one of the following STYLE options:
- SMALL - Displays a mini-zoom control (only + and - buttons).
- LARGE - Displays the standard zoom slider control.
- DEFAULT - Picks the best zoom control based on device and map size.
Most of the control options contain a position property which indicates where on the map to place the control. The following control POSITIONS are supported:
- TOP CENTER indicates that the control should be placed along the top center of the map.
- TOP LEFT indicates that the control should be placed along the top left of the map, with any sub-elements of the control "flowing" towards the top center.
- TOP RIGHT indicates that the control should be placed along the top right of the map, with any sub-elements of the control "flowing" towards the top center.
- LEFT TOP indicates that the control should be placed along the top left of the map, but below any TOP LEFT elements.
- RIGHT TOP indicates that the control should be placed along the top right of the map, but below any TOP RIGHT elements.
- LEFT CENTER indicates that the control should be placed along the left side of the map, centered between the TOP LEFT and BOTTOM LEFT positions.
- RIGHT CENTER indicates that the control should be placed along the right side of the map, centered between the TOP RIGHT and BOTTOM RIGHT positions.
- LEFT BOTTOM indicates that the control should be placed along the bottom left of the map, but above any BOTTOM LEFT elements.
- RIGHT BOTTOM indicates that the control should be placed along the bottom right of the map, but above any BOTTOM RIGHT elements.
- BOTTOM CENTER indicates that the control should be placed along the bottom center of the map.
- BOTTOM LEFT indicates that the control should be placed along the bottom left of the map, with any sub-elements of the control "flowing" towards the bottom center.
- BOTTOM RIGHT indicates that the control should be placed along the bottom right of the map, with any sub-elements of the control "flowing" towards the bottom center.
| Property | Description |
|---|---|
| Map Type Control |
Show/Hide Map Type Controller. It lets the user toggle between map types (roadmap and satellite). vMap also allows you to control its style and position. Choose a Style for Map Type Controller.
Choose a Position for Map Type Controller
|
| Zoom Control |
Show/Hide Zoom Controller. It displays "+" and "-" buttons for changing the zoom level of the map. Choose a Style for Map Type Controller.
Choose a Position for Map Type Controller
|
| Pan Control |
Show/Hide Pan Controller. It displays a pan control for panning the map. You can also choose the position form the dropdown list.
|
| Street View Control |
Enables/Disables the Pegman control that lets the user activate a Street View panorama. It displays a Pegman icon on Map which can be dragged to the map to enable Street View. You can choose its position as well.
|
| Scale Control |
Enables/Disables the Scale control on the Map that provides a simple map scale. You can also set its position to be display on the map.
|
| Enable Direction | Enable/Disable Direction Service on the Map. It communicates with the Google Maps API Directions Service which receives direction requests and returns computed results. |
| Enable Polyline | Enable/Disable Polyline on the Map. Directions are displayed as a polyline drawing the route on a map. You can also set a custom color of polyline through a color picker tool. |
| Show Locate Me | Enable/Disable Show Locate Me option to share your location which displays your current location on the Map |
| Map Layers |
Layers may alter the presentation layer of the map itself, slightly altering the base tiles in a fashion consistent with the layer. When you calculate directions, you need to specify which Map Layer to use. The following Map Layers are currently supported:
|
Marker Options
The Marker Options Section provides various parameters which allows you to control your Markers on the map.
| Property | Description |
|---|---|
| Markers Data |
If you want to include markers manually using vMap or want to use imported makers through CSV file, Keep #__vmap table selected but If you want to display the markers from your existing database then select table and its respective columns. On Selecting a table, some additional fields will be display to take further input
|
| Dynamically Load Markers | Set “YES” if you want to load markers as per the Map Viewport. Map View port changes when you drag, zoom in, zoom out etc. if it set to “No” all the markers available on the map will display all together in Map Viewport. |
| Marker Width | Set the width of the marker. Unit: pixel |
| Marker Height | Set the height of the marker. Unit: pixel |
| No. of Marker on Map | Set the quantity of the markers you want to display on the map. |
| Marker Animation | vMap allows you to set he Marker Animations. You can set the animation either to BOUNCE or DROP. |
| Default Marker Image | Set the default marker image from the dropdown list. There are various marker icons VMap has got by default. |
Info Window Options
The Info window Options Section provides various parameters which allows you to customize the Marker Info Window as per your need.
| Property | Description |
|---|---|
| Display Info Window | Show/Hide Info-Window on the map. An Info-Window displays content (usually text or images) in a popup window above the map, at a given location. |
| Info Window width | Set the width of the info window in pixels. |
| Info Window height | Set the height of the info window in pixels. |
| Info Window opens On | When you create an info window, it is not displayed automatically on the map. Choose the option from the list (i.e. click or mouse over) to make the info window visible on the map |
| Include in Info Window | Please select the options you want to display in Info Window (you can select multiple option) |