Ornament

Prerequisites

Include the Google Maps API script tag on your page, preferably in a content_for :scripts block:

<%- content_for :scripts do -%>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAjgOvjmIVHFO-1IVSYWeZN-1Yp_MkjeW0">
  </script>
<%- end -%>

Creating a Google Map

Maps are made up of a container element that has a data-map attribute. Inside the container goes your pin elements. The pin element has the data attribute of data-map-pin which takes the latitude and longitude of your pin. You can also optionally pass in data-map-pin-title to specify a hover title for the pin.

<div data-map>
  <div data-map-pin="-34.921619,138.599257" data-map-pin-title="This is a pin!"></div>
</div>

Custom centering

By default the map will centre on your pin. If you don't want it to, you can pass in data-map-position in to your container element:

<div data-map data-map-position="-34.924548,138.594808">
  <div data-map-pin="-34.921619,138.599257"></div>
</div>

Adjusting Zoom Level

Zoom level can be customised with data-map-zoom.

<div data-map data-map-zoom="8">
  <div data-map-pin="-34.921619,138.599257"></div>
</div>

Colouring Map

Add data-map-colour to your map element.

Customising the colours themselves can be done in ornament/defaults.js. You should notice a really long array of colour definitions. You can either update each colour manually or plug one in from SnazzyMaps.

<div data-map data-map-colour>
  <div data-map-pin="-34.921619,138.599257"></div>
</div>

No Controls

Simply add data-map-controls="false" to your map element.

<div data-map data-map-controls="false">
  <div data-map-pin="-34.921619,138.599257"></div>
</div>

data-map-controls can also take the value "minimal" to prevent zooming from the scrollwheel and show only the zoom UI.

<div data-map data-map-controls="minimal">
  <div data-map-pin="-34.921619,138.599257"></div>
</div>

Static

A static map will be un-interact-able. Add data-map-static to your map element. Works well in combination with data-map-controls="false".

<div data-map data-map-controls="false" data-map-static>
  <div data-map-pin="-34.921619,138.599257"></div>
</div>

Static with a Link

You can pass in a value to the data-map-static attribute which will turn the static map in to a link, using the value as the page it links to:

<div data-map data-map-controls="false" data-map-static="https://www.google.com.au/maps/place/North+Terrace,+Adelaide+SA">
  <div data-map-pin="-34.921619,138.599257"></div>
</div>

Static with Lightbox

You can combine the static map with the Lightbox component to create a static map that opens an interactive lightbox map:

<div class="mfp-hide lightbox--body" id="lightbox-map">
  <div data-map>
    <div data-map-pin="-34.921619,138.599257"></div>
  </div>
</div>
<a href="#lightbox-map" data-lightbox data-lightbox-flush>
  <div data-map data-map-controls="false" data-map-static>
    <div data-map-pin="-34.921619,138.599257"></div>
  </div>
</a>

Multiple Pins on a Map

Adding multiple pins is as simple as adding multiple pin elements.

If you want the map to automatically position and zoom to all pins on the map, you can pass data-map-bounds in to your container element. data-map-bounds will ignore data-map-position and data-map-zoom for obvious reasons.

<div data-map data-map-bounds>
  <div data-map-pin="-34.921619,138.599257"></div>
  <div data-map-pin="-34.924548,138.594808"></div>
</div>

Adding infowindow popups

Want to add infowindows? You can do by adding any content inside the pin element.

Styling of infowindow typography can be done in map.css.scss.

<div data-map>
  <div data-map-pin="-34.921619,138.599257">
    <h2 class="heading-two">Infowindow</h2>
    <p>This is my infowindow, isn't it awesome?</p>
    <p><a href="#">Here's a link.</a></p>
  </div>
  <div data-map-pin="-34.924548,138.594808">
    <p>This is another infowindow</p>
  </div>
</div>

Custom Pins

You can assign pin images to each pin using data-map-pin-image. Alternatively, if you want to over-ride pins globally, you can open up map.js and update the pinImage variable at the top.

<div data-map>
  <div data-map-pin="-34.921619,138.599257" data-map-pin-image="http://placehold.it/32x32"></div>
</div>

Clustering

Clustering can be added to your map by adding data-map-cluster.

Near the top of map.js you can find a clusterConfig object where you can alter cluster settings.

<div data-map data-map-cluster data-map-zoom="10">
  <div data-map-pin="-34.921619,138.599257"></div>
  <div data-map-pin="-34.924548,138.594808"></div>
</div>

Geolocation

Geolocation adds a pin to the map with your current location, zooms and centers to you.

<div data-map data-map-geolocate>
  <div data-map-pin="-34.921619,138.599257"></div>
</div>

Geocode

Sometimes latitudes and longitudes aren't always available. You can geocode a pin by adding data-map-geocode to your map.

Note that geocoding uses google's geocoding API, which has limitations. This is only recommended for very small amounts of pins. Make sure you aware of these limitations before using this feature.

<div data-map>
  <div data-map-pin="5 Leight Street, Adelaide" data-map-pin-geocode></div>
</div>

Locking a map for responsive Proof of Concept

Users on touch devices can often get stuck on large maps. To fix this we have implemented a locking feature.

Scale the window down and you will see the map lock.

<div data-map data-map-locked>
  <div data-map-pin="-34.921619,138.599257"></div>
</div>

Global Settings

Want to make all your maps behave in the same way without having to worry about adding in data attributes everywhere? No worries, open up your map.js file edit the variables at the top.

var mapPinImage = "/assets/pin.png";
var mapDefaultZoom = 15;
var allMapsColoured = true/false;
var allMapsMobileLocked = true/false;
var allMapsStatic = true/false;