<ev:map />

A tag that generates a google map from the data provided.

<ev:map latitude="52.0533564" longitude="1.1616143" zoom="12" height="400" />

Attributes
height	Number (required) This is the height of your map. `<ev:map height="400" />` Note: Your map must have a height. This can be set as an attribute, or through CSS.
id	String (optional) This is for your own reference. We recommend giving your map an id if you need to adjust the CSS or Javascript for this particular map. `<ev:map id="contactMap" />`
key	String (optional) Here you can pass in a google maps api key, if you ignore this attribute we will use the google maps api key from your evance settings. You can get a google maps api key here. `<ev:map key="YOUR_KEY_HERE" />`
latitude	Number (optional) Latitude in degrees. Values will be clamped to the range [-90, 90]. This means that if the value specified is less than -90, it will be set to -90. And if the value is greater than 90, it will be set to 90. `<ev:map latitude="52.0533564" longitude="1.1616143" />`
longitude	Number (optional) Longitude in degrees. Values outside the range [-180, 180] will be wrapped so that they fall within the range. For example, a value of -190 will be converted to 170. A value of 190 will be converted to -170. This reflects the fact that longitudes wrap around the globe. `<ev:map latitude="52.0533564" longitude="1.1616143" />`
static	String (optional) `true \| false` Choose whether you wish your map to be a standard interactive map, or a static image of the map. By default, the map will be interactive. `<ev:map static="true" />`
zoom	Number (optional) The initial zoom level. Integers between 0 and 18 are valid. If no zoom level is set, google maps will try and fit the bounds of the markers if supplied. `<ev:map zoom="6" />`

<marker />

You can display markers on your map by including the marker tag inside of your map.

<ev:map height="400">
    // Marker using longitude latitude for it's position.
    <marker title="marker-one" latitude="52.0533564" longitude="1.1616143" />
    
    // Marker using address for it's position.
    <marker title="marker-two" address="Sorrel Horse Mews, Grimwade Street, Ipswich IP4 1LN" />
</ev:map>

Any text or html within your marker tag will generate an infowindow.
This infowindow will appear when a user clicks on the marker.

<ev:map height="400">
    <marker title="marker" address="Sorrel Horse Mews, Grimwade Street, Ipswich IP4 1LN">
        // Marker infowindow content.
        <div class="content">
            <h4>Lorem ipsum</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nullam auctor gravida sagittis. Nam tempus scelerisque
                sollicitudin. Morbi efficitur, justo sed finibus vestibulum,
                ipsum elit tristique leo, in fermentum lectus dui eget turpis.
            </p>    
        </div>
    </marker>
</ev:map>

Attributes
address	String (required) Google will attempt to locate the address provided `<marker address="Sorrel Horse Mews, Grimwade Street, Ipswich IP4 1LN" />` Note: Your marker must have either the 'address' attribute, or both 'latitude' and 'longitude' attributes.
latitude	Number (required) Latitude in degrees. Values will be clamped to the range [-90, 90]. This means that if the value specified is less than -90, it will be set to -90. And if the value is greater than 90, it will be set to 90. `<marker latitude="52.0533564" longitude="1.1616143" />` Note: Your marker must have either the 'address' attribute, or both 'latitude' and 'longitude' attributes.
longitude	Number (required) Longitude in degrees. Values outside the range [-180, 180] will be wrapped so that they fall within the range. For example, a value of -190 will be converted to 170. A value of 190 will be converted to -170. This reflects the fact that longitudes wrap around the globe. `<marker latitude="52.0533564" longitude="1.1616143" />` Note: Your marker must have either the 'address' attribute, or both 'latitude' and 'longitude' attributes.
title	String (required) When the user hovers over the marker they will see the title. If you have multiple markers in your map, the title must be unique. `<marker title="marker-one" />`
pin	Url (optional) You can choose to use a custom image to appear instead of the standard google maps marker. `<marker pin="IMAGE_URL_HERE" />`
pinActive	Url (optional) The active pin will only appear if the marker has an infowindow, and the infowindow is open. `<marker pin="IMAGE_URL_HERE" pinActive="IMAGE_URL_HERE" />`

<ev:map />

<marker />

Website builder

Themes

Partners

Resources

Evance