Basic Setup

Awesome Maps comes with 2 separate stacks that are use together, a container stack and an inner stack.

Awesome Maps Container Stack

The container stack is titled “Google Maps Container” and is the first stack that needs to be placed.

Awesome Maps Location (Inner) Stack

The inner stack is titled “Google Maps Location” and is placed inside of the container stack. You can place as many of these as you like inside the container.

Finding Coordinates

I recommend the use of the web app MyGeoPosition.com though there are dozens of similar tools available on the web. I chose to use this as the way to create locations as it is much more accurate and allows users to change the location if an address/geo position tools is not accurate. At this website you can simply add your address/location and the Google API will provide you with the Latitude & Longitude of the location.

Be sure to set a Latitude & Longitude for every inner stack include a default one for the container stack.

Container Settings

General Options

Roadmap Customization : This option is only available for the Roadmap ‘Map Type’ and turning this on will remove the ‘Map Types’ drop down menu from the options. Turning this on will open the ‘Custom Title’ option (next option), but more significantly will create an option in the colors section at the bottom titled ‘Custom Map Colors,’ which allows you control over the maps various colors.

Custom Title : This is the text that will display in the top right of the map for your custom map unless the ‘Map Type Control On’ option is turned off (in the options below).

Map Types : There are 4 maps types in Google Maps. All of these are available and include Roadmap (default), Hybrid, Satellite, and Terrain.

Title Header Tag : You can set the location title to any header tag (1-6). h4 is the default.

Expanded Title : The header tag setting for the expanded title – by default the title that appears on the right hand side of the map.

Default Latitude : The latitude coordinates that are displayed when the map first loads. This should be the same as one of the latitude coordinates of one of the inner stacks.

Default Longitude : The longitude coordinates that are displayed when the map first loads. This should be the same as one of the longitude coordinates of one of the inner stacks.

Center on Click : This is turned off by default and locations will load on Hover. If this selected the locations will no longer load on hover, but rather when the user clicks the location title.

Pointer on Hover : If this box is checked the mouse marker will change to “pointer”/hand when hovering over the location.

Scrollwheel Zoom On : By default users can scroll in and out of the map using their mouses’ scroll wheel. Unchecking this box will remove that feature, though users can still zoom in/out using the manual controls.

Hide Description : Checking this box will remove the long description section.

Zoom : This controls the zoom level of the map (higher numbers zoom in more, lower numbers zoom out more).

Zoom on Click : This controls the zoom level if the user clicks on the location on the map.

Active Marker : By default the Google maps marker icon is used, though adding a new image in here will replace the marker to any other marker/image you wish to use.

Animate Icon (bounce) : Turning on this option will cause markers to quickly and subtly bounce (animate) into their location when the Title is hovered/selected.


Sizing & Spacing

Static Widths : By default widths are set to percentages for a responsive layout (adjusts to screen size). Changing this to static widths changes the measures to set pixel widths that will not adjust to screen size. List width refers to the location titles and small descriptions, Map width refers to the Google Maps section, Desc width refers to the Large description section.

Map Height : The height of your Google maps section – does not effect the height of other sections.

List … Pad : Places padding (space inside) depending on the position listed for the Title & Small description container. There are controls for top, right, bottom, left.

List … Marg : Places margin (space outside) spacing depending on the position listed for the Title & Small description container. There are controls for top, right, bottom, left.

Desc … Pad/Marg : Padding & Margin controls for the Large description area. There are controls for vertical (Vert) and horizontal (Horiz).


Colors & Styling

Active Title : Controls the color of the active title (hovered or clicked).

Transparency On : By default this is checked and by unchecking you can then add background color, border color, and border width to the List (title & small description) and Large description sections. Having this checked will not effect the ability to change the Map’s border width and color.

Title Tab Shadows On : Selecting this allows you to control the container shadow for the List (title & small description) section.

Desc Shadows On : Selecting this allows you to control the container shadow for the Large description section.

Map Shadows On : Selecting this allows you to control the container shadow for the Map section.

Custom Map Colors : This option is only available if ‘Roadmap Customization’ is selected (the very first checkbox). Activating this will allow you to change the colors for the map’s features including Highways, Arterial Roads, Local Roads, Water, Transit Lines, Transit Stations, Land (man made), Land (natural).


Controls Displayed

Pan Control On : Unselecting will remove circle with arrows (left, right, up, down) in the top left of the map.

Zoom Control On : Unselecting will remove the zoom control on the left side (has a plus and minus button and draggable slider).

Map Type Control On : Unselecting will remove the Map Type options located in the top right. If using a custom map design users can use this section to switch to default Google Maps, so you may wish to disable this in that circumstance or simply to make the map less busy.

Scale Control On : Unselecting will remove the scale icon in the bottom left just to the right of “Google.”

Street View Control : Unselecting will remove the icon in the top left with a person (allows for street view).

Overview Map Control On : Unselecting will remove the arrow icon in the bottom right.


Advanced

API Address : This is an advanced option and unlikely to be of use for most users. Their are text instruction above it that show the API Address that must be used if running Google Maps on a Secure Socket Layer (SSL).

  • http – maps.google.com
  • https – maps-api-ssl.google.com

API Key On : In most cases you do not need this option turned on and doing so simply allows Google to detect usage. If your map gets a ton of traffic Google may require you to pay fees depending on usage, but in most cases this is not necessary. For more details read Google’s Documentation here.

Key : This field appears only when the API Key On option is checked. You enter your key in the field and end it with the ‘&’ symbol – this is needed for other URL commands that follow the key.


Usage in Lightboxes

Many lightboxes (containers that pop up and typically everything behind them is dimmed) will append content outside of stacks causing duplicate API calls in Awesome Maps. To fix this all you need to do is break the call in Awesome Maps and then manually call in the API.

API Address

Locate the API Address field and delete everything inside.

Then manually call in the API by placing the following code into your Page Info > Header section:

1
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>

Changelog

Version 2.1.9 (September 9, 2014)

  • ID tags changed to classes to avoid duplications on multiple uses
  • Overflows set for instances where size percentages are set to zero

v2.1.7 (August 18, 2014)

  • Added bind event for loading inside cleanTabs

v2.1.6 (May 16, 2014)

  • Added Markup to assist in overriding theme defaults for title tags

v2.1.5 (April 21, 2014)

  • Created new color controls for Title, Title (hover) and Expanded Title

v2.1.2 (March 10, 2014)

  • Added abilit to add a Google API Key (in advanced options) – this is not needed for most users – for more information see Google’s Documentation here
  • Changed colors for Arterial & Local roads – color will no longer effect text/road names.

v2.0.0 (January 27, 2014)

  • Custom Controls for Roadmap Map Layout
  • Custom Title (only if Custom Controls is turned on – appears in top right controls as the name of the map style and allows users to switch back to default)
  • Animate Icon (bounce) – nice animation effect for map markers when selected
  • Custom Map Colors (availabe if Custom Controls is turned on)
    • Highways, Arterial Roads (main roads), Local Roads (i.e. neighborhoods)
    • Water
    • Transit Lines & Transite Stations
    • Land/Landscapes (Man Made & Natural)
  • Turn on/off Map Controls: pan, zoom, map type, scale, streetview, overview map
  • Advanced – API Address option (maps.google.com by default, maps-api-ssl.google.com for SSL addresses)

v1.0.4 (January 20, 2014)

  • Added control of header tags for titles
  • Added control of header tags for expanded titles (top of large description section)

v1.0.2 (December 18, 2013)

  • Removed ‘enable’ command on Active Title color control
  • Changed a few default values