Basic Setup
Awesome Maps comes with 2 separate stacks that are use together, a container stack and an inner stack.
The container stack is titled “Google Maps Container” and is the first stack that needs to be placed.
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 mapcoordinates.net/en 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.
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&sensor=false"></script> |