Web design, CMS and development, since 2014VR Games
Archive page. This page documented a Huge-IT plugin or extension demo. The products are no longer sold or supported — the page is kept as a reference for anyone still running them. Current material lives in the plugin library and in the blog.
Joomla Google Maps User Manual

Add Google Maps Extension

For installing Google Maps extension go through the following steps: Extensions > Manage > Upload Package File > choose the appropriate zip file > upload and install Huge-IT Google Maps

Create Component

Menus > Main Menu> choose one of your menu items> select our extension as Menu Item Type> select Google Maps from the list of created maps

Create Article with plugin

Extensions > Plugins > find Huge-IT Google Maps plugin > Activate it. Now you can use it as article item with the help of shortcode.

Google Maps as a Module

The module of this extension is made to facilitate the process of using the plugin within a page. You can place it in different positions within a page, choose in which pages to display or do not display at all.

How to install module zip file: Extensions > Module Manager > Activate Huge-IT Google Maps> Choose Google Maps and Position within the particular theme (on right panel) > Menu assignment > Choose where to display it

The main options of Google Maps extension

Create your map going through the following steps: Components > Google Maps> My First Map.

General Options

  • Map Name:

    You are free to name your Google Maps

  • Enable Pan-Controller:

    Select to enable movement of the controller

  • Enable Zoom-Controller:

    This option allows you to enable or disable the zoom function of your map

  • Enable Map-Type-Controller:

    This is for showing the map types: Map and Satellite

  • Enable Scale-Controller:

    Select to display or not the scale

  • Enable Street-View-Controller:

    This is for showing the Street View Controller

  • Enable Overview-Map-Controller:

    Select to see map controller on the bottom of the right corner

  • Default Zoom:

    Set the level of the default zoom for showing the map

  • Minimum and Maximum Zoom:

    Select the minimum or maximum zoom

  • Center Address:

    Select for your maps central address

  • Center Latitude:

    Select latitude for more detailed coordinate of the center or it will be filled according to selected address

  • Center Longitude:

    Select longitude for more exact coordinate of the center or it will be filled according to selected address

  • Map Width:

    Set the preferable size for the maps width

  • Map Height:

    Write the height of the maps with the pixels

  • Map Align:

    There are three positions to settle your map: Right, Left and Center

  • Border Radius:

    Give some border radius size for your Google Maps

  • Wheel Scrolling:

    Turn on map’s wheel scrolling

  • Map Draggable:

    Map can be draggable or not

  • Map Language:

    Select Location Based language for the map

  • Map Animation:

    There are various types of animation to select from

  • Map Type:

    Select one of the types to show your map

  • Marker Infowindow Open On:

    Select Click or Hover

Markers

  • Add New Marker:

    Press this button to add new location markers to your map

  • Address:

    Choose the address you want to show on the maps

  • Latitude:

    Set the coordinates for the address or it will be filled according to selected address

  • Longitude:

    Set the longitude of the address or it will be filled according to selected address

  • Animation:

    Select the animation for the marker

  • Title:

    Give a title to the marker

  • Description:

    Write description for the marker

  • HTML description:

    Add HTML description for the marker

  • Choose Marker Icon:

    There is number of amazing icons to set for the marker

  • Size of Icon:

    Change the size of the icon

  • Custom Marker Icon:

    You can also upload your desired icon

Polygons

  • You create the polygon very easily:

    add angles of the polygon by right-clicking on desired location on the map, and erase the angle by left-clicking on it.

  • Add New Polygon:

    Press the button to create a new Polygon

  • Name:

    Give a name to your polygon

  • Link:

    Add some link with external URL which will direct to another page

  • Data:

    After creation of polygon the data of your coordinates of the address will automatically appear here

  • Line Transparency:

    Decide the level of the transparency for the lines of mentioned area

  • Line Color:

    Line color will change the border color of the specified area

  • Line Width:

    Decide the width of the boundary line

  • Fill Transparency:

    Select the level of transparency for internal area of polygon

  • Fill Color:

    Choose your desired color for the map inner area polygon

  • On-Hover Fill Transparency:

    Select the level of transparency for internal area of polygon when hovering

  • On-Hover Fill Color:

    Select one of the colors for inner area of when hovering

  • On-Hover Line Transparency:

    Select the transparency of the borderline when hovering

  • On-Hover Line Color:

    Choose your desired color of the map when hover over the border line

Polylines

  • Right click and hold to set path of polyline

  • Name:

    Give a name to your polylines

  • Line Transparency:

    Your lines on the map can be transparent

  • Line Color:

    Select the line color on the map

  • Line Width:

    Choose the thickness of the line

  • On-Hover Line Color:

    Give a color to your lines when to hover on the map

  • On-Hover Line Transparency:

    Set the level of the transparency of the line hover color

Circles

  • Circle:

    round area for showing the particular range

  • Add New Circles:

    Add new circles on the map

  • Name:

    Name your circle

  • Center Address:

    Write the central address in the circle or choose it by right-clicking on the map

  • Center Latitude:

    Select middle Latitude of the circle range or it will be filled according to selected address

  • Center Longitude:

    Select middle Longitude of the circle range or it will be filled according to selected address

  • Show Marker:

    Select to show or hide the marker in the circle

  • Radius(meter):

    Define the radius of your circle

  • Line Width:

    You can create a borderline for the circle

  • Line Color:

    Select one of the amazing colors for the circle border

  • Line Transparency:

    Decide preferable line transparency

  • Fill Color:

    Select the color of the internal area of circle

  • Fill Transparency:

    Select the level of transparency for internal area of circle

  • On-Hover Fill Color:

    Give a color to the circle when to hover over it

  • On-Hover Fill Transparency:

    Decide the level of the transparency of the hover circle color

  • On-Hover Line Color:

    Select the color for a borderline while hovering

  • On-Hover Line Transparency:

    Decide the degree of the transparency of the circle line on hover

Layers

  • Enable Traffic Layer:

    Put checkmark to enable the traffic layers for the Google Maps

  • Enable Bicycling Layer:

    Enable the bicycling layers on the map

  • Enable Transit layer:

    Put checkmark to show transit layers on the map

Map Styling

  • Hue(color):

    Do some more styling, give a color to your map

  • Lightness:

    Make the map darker or lighter with this option

  • Saturation:

    Decide the level of the saturation for the map

  • Gamma:

    Select the gamma you desire for the map

Shortcodes:

  • Copy & paste the shortcode directly into any Joomla article.

  • Copy & paste this code into a template file to include the google map within your theme.

More Features

  • Create Copy Of This Map
  • Export This Map To CSV