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

add_google_maps_extension

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

map-create-component

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.

map-create-article-width-plugin

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

google-map-as-module

The main options of Google Maps extension

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

Google-maps-main-options

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

map-general-options

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

map-markers-options

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

map-polygons

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

map-polylines

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

map-circles

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-layers

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

map-styling

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
map-more-features