Hot Maps ParametersThis module is based on Google Maps API v3 and you have full control over the map style. The new version of Hot Maps allows you to match the map style with the style of your site. You can change the map's colors, enable or disable elements and add multiple markers on the map.

The most popular online maps service today is certainly Google Maps. This service covers the entire globe. Almost all places and addresses throughout the world are included in this giant online world map. Modern websites often use free maps from Google to show where the company is located or how to find the company's offices. Travel websites can use maps to show destinations they offer for vacation trips. You can use the Hot Maps plugin and module to insert Google Maps easily into your Joomla content pages.

Joomla Google Maps Plugin and Module Hot Maps has been created to allow webmasters to include any map from Google Maps inside the Joomla website. With one purchase, you will get both the Hot Maps plugin and module!

 

Map Samples

These are just a few samples of maps with different style settings. There are no limits to map styling. You can control every aspect of the map's style. Like in graphic editing software, you can control the map's hue, saturation, lightness, gamma and visibility, and colors of the map's elements.

Google Maps Module

Once you install the module and publish it in appropriate module positions, you should enter the location that should be displayed (for example "Copacabana beach Brazil") and set the dimensions (width and height) of the map. That's it. Your map is ready! There's no need to register or copy any code.

In addition, you can include pre-text and post-text (HTML allowed) that will be displayed above and below the map. Also, you can include a link to the full map (hosted on Google). Finally, you can select whether to show a graphical map or satellite image of the location.

Module Settings

  • MAP ID: If you need multiple maps on a page, please use a unique Map ID for each module instance.
  • USE GOOGLE MAPS API: Google Maps API key is required for the advanced options of this module. You can get an API key from Google Cloud Console. Without the key, the map will be displayed normally, but advanced styling of the map and multiple markers won't be possible.
  • API KEY: You can get a free Google Maps key for your website from Google Cloud Console. Once you have it and once it's registered for use on your website, you can enter it in the module parameters.
  • MODULE WIDTH/HEIGHT: Enter the dimensions of the module in pixels (in example 300).
  • MODULE WIDTH UNITS: Select whether to use pixels or percents for the map's width. Percents are appropriate for responsive websites.
  • LOCATION or ADDRESS: Enter a location, in example "copacabana praca do lido" or address, in example "1 Infinite Loop Cupertino CA 95014" . Please use only letters and numbers! Don't use any special characters!
  • ZOOM LEVEL: Enter a value for zoom between 1 and 20. Value 1 shows the whole world. Value 20 zooms the selected area at the maximum level.
  • DISABLE MAP USER INTERFACE: You can disable the default Google user interface for map control here.
  • TEXT BEFORE/AFTER MAP: You can enter some text to be displayed above or under the map frame. HTML is allowed here.

Module Style

  • BORDER: Enter value for border, in example "1px solid #000". Please keep in mind, if you are using a 100% width value, you should set the border to "none" or decrease the width to 99% or less (the border is added to the overall width).
  • SATELLITE IMAGES: Select whether to show a satellite image of the terrain or not.
  • HUE: Select a dominant color for your map. You can leave this empty to use the default Google Maps color scheme.
  • SATURATION: You can use this parameter to make a map in grayscale or to use high colors. Enter value between -100 (gray) and 100 (high colors).
  • LIGHTNESS: Control the lightness of your map image here. Enter a value between -100 (very dark) and 100 (very light).
  • GAMMA: Control the gamma value of your map image here. Enter value between 9.99 (very light) and 0.01 (very dark).
  • VISIBILITY: Select full or simplified visibility of the map's elements.
  • LABELS: Enable or disable labels on the map (for streets, rivers, cities, etc...).
  • WATER COLOR: Select a color for the presentation of water surfaces (for rivers, lakes, sea, etc...).

Markers

It's possible to enable or disable the marker for the central map location (from the Location parameter). Besides this default marker, you can add five more markers to your map. For each additional marker, you have three parameters. It's the marker's latitude, longitude, and title.

Google Maps Plugin

Installation of the plugin is straightforward and should be done through Joomla Extensions Manager (Extensions > Install/Uninstall). After installation, you should go to the Plugin Manager (Extensions > Plugin Manager) to publish the plugin. Now you are ready to start using the plugin in Joomla content pages.

When you create/edit any page, in the place where you'd like a map to be shown, you should add this code:

{hotmaps}paris eiffel tower,100%,300px{/hotmaps}

Parameters (in the code itself):

  • LOCATION (in our example: Paris Eiffel tower): Enter a location, in example "paris eiffel tower" or address, in example "1 Infinite Loop Cupertino CA 95014" . Please use only letters and numbers! Don't use any special characters!
  • MAP'S WIDTH (in our example: 100%): Enter the width of the map's frame and units.
  • MAP'S HEIGHT (in our example: 300px): Enter height of the map's frame and units.

Parameters of the plugin (in Extensions > Plugin Manager > Content - Hot Maps)

  • SATELLITE IMAGES: Select whether to show a satellite image of the terrain or not.
  • DISPLAY LINK: Select whether to show link to the full map page (on maps.google.com).
  • LINK TEXT: Enter the link's text.
19 USD