Map
Element Overview
The Map Element embeds a responsive Google Map onto the page and is extendable, but contains two Type options by default: Google Map Embed and Google Map Custom. A wide range of options for customization of the positioning, map type, style, and markers for the map are available depending on the Type chosen.
Element Options
Type
Choose the Map type using this dropdown. “Google Map Embed” and “Google Map Custom” will generally be the only Types available. However, it is possible for developers to add in more Types, so depending on which website you are editing, there could be more with options that are different in style or in terms of options than these two Types.
Note: The visibility of the following options is dependent on which Type has been selected.
Google Map Embed (Type)
Google Map Embed Code
Paste the embed code for the Google Map to be embedded here. To get the embed code, click "Share" on any Google Map, choose "Embed map" and copy the embed code.
Google Map Custom (Type)
Map Center Coordinates
Input latitude and longitude to set map center in this field. To find the coordinates, right-click on your desired location within Google Maps and click “What’s here?”. The box at the bottom will contain the coordinates.
Map Markers
This section is where all Map Markers will be built and ordered. Click “Add Item” to begin constructing a Map Marker and add more markers as you go along. Each Map Marker added to the Map will be represented by a block. These blocks can be dragged-and-dropped to be re-arranged in any order. They contain options for adding a custom Marker Image, the Map Marker Coordinates, and Popup Content.
Marker Image
Choose a Marker Image for the map from the WordPress Media Library. Map Marker images use the WordPress Default “Thumbnail” Image Size.
Learn More About Image Sizes & Adding Images
Map Marker Coordinates
Each Map Marker needs a set of latitude and longitude coordinates to set the proper location. To find the coordinates, right-click on your desired location within Google Maps and click “What’s here?”. The box at the bottom will contain the coordinates.
Popup Content
Input the marker tooltip text in this field. Plain text and HTML without attributes (e.g. <h4>Title</h4>) are supported.
Element Advanced Options
Map Height (All Types)
Input the height of the map in pixels in this field. The default height is 300px.
Map Type (Google Map Custom)
Choose from four different Map Types: Road Map, Satellite, Hybrid, and Terrain. “Road Map” will display a two-dimensional map, “Satellite” will display the map using satellite imagery, “Hybrid” will combine aspects of Road Map and Satellite, and “Terrain” will add indicators to the map to communicate the elevation level of everywhere on the map.
Map Type Control (Google Map Custom)
Enable Map Type Control to reveal the Map Type Control Style and Position options described below.
Map Type Control Style (Google Map Custom)
Two control styles are available: Horizontal Bar and Dropdown Menu. “Horizontal Bar” also acts as the Default and will display a bar with buttons allowing you to toggle between the different Map Types.
“Dropdown Menu” will consolidate the buttons into a single dropdown menu.
Map Type Control Position (Google Map Custom)
Control of the position of the Map Type Controls with this option. Choose from a variety of positions. The default is “Top Left”.
Zoom (Google Map Custom)
Control the zoom level of the map on page load. The lower the number, the further zoomed out the map will be. The higher the number, the more closely zoomed in it will be. Choose any number from 7-20 in the dropdown menu. The default is 14.
Zoom Control (Google Map Custom)
Enable Zoom Control to reveal the Zoom Control Position option described below.
Zoom Control Position (Google Map Custom)
Control the position of the zoom controls with this option. Choose from a variety of positions. The default is “Top Left”.
Scale Control (Google Map Custom)
Enable to show Scale Controls in the bottom right corner of the Map. Scale Controls adapt to your current zoom level, showing a scale reference for the distance between any two points on the map. Click on it to toggle between imperial (feet) and metric system (meters) based scales.
Map Styles (Google Map Custom)
Input a custom styles array (e.g. from Snazzy Maps) to change the map appearance in this field.
Element Style Options
Every Element has a standard set of style options available to it that allow for margins, padding, background color, CSS classes, and more to be set.