Introduction

 

This is the demo page for the Joomla module “responsive colored Google map” which runs for Joomla 2.5 and Joomla 3.0. This module is capable of doing the following:

  • displaying a custom colored responsive Google map (api 3)
  • displaying multiple markers on the same map
  • displaying multiple maps on the same website path
  • assigning an individual icon and label to each marker
  • controlling all basic Google GUI settings (pan, zoom, type of map etc.)
  • using Google map styles (color, contrast, saturation, lightness etc.)
  • using own templates to configure the map according to your own needs
  • adding your own icons by using template overrides

If this module is exactly what you are looking for to customize your Google maps, give it a shot and download it from:

http://extensions.joomla.org/extensions/maps-a-weather/maps-a-locations/street-maps/27151

The latest development snapshot can be found here:

https://github.com/DHoffm/Responsive-color-google-map

 

The following examples demonstrate the variety of possibilities.

 

Google map with a single marker

Here you can see the usual single marker with the opened info window pop-up at the beginning.

 

These examples demonstrate the possibility of displaying multiple markers with different icons on the map. There is no limitation on the amount of markers to be used. You can either choose icons from the list of marker icons or load your own icons from a subfolder named /images out of all templates and template overrides.

 

Google map with multiple markers and different icons



Google map styles and custom template

This example demonstrates the possibilities of using the different map styles and custom templates. You can choose from the following settings: color, contrast, saturation, lightness and simplified display.

The values used in this example are:

  • Color = #ff00a1
  • Contrast = 0.18
  • Saturation = 69
  • Lightness = -22
  • Simplified display: no

The info window pop-up looks different than the usual one. This effect is achieved by using a custom template named “highlighted_heading”. Templates can be selected in the module settings. To build your own templates you have to copy and paste the default module template into your Joomla page template html folder.

 

Fullscreen toggle

Click the button on the top-right to toggle fullscreen and normal display.

 

Map overlays

You can add overlays to the map such as weather and cloud data, bike routes and traffic data. Zoom out to see the weather and cloud overlay.

Location search

Nearby search (location or zipcode):

You can search any location or zipcode in the above input field. You will be notified if the map doesn't find a result.

Addresses and contact

1. First Marker: Search for Erfurt and you will only see this marker.
2. Marker: Search for Berlin and you will only see this marker.

Route

Get route