Map
‹ BackPrerequisites
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
.
This is another infowindow
<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;