Joomla Google Maps User Manual – Huge-IT

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