Maps

Simple Google maps

Adding a map to a page is a great way to describe a location in addition to a text-based description. This component uses the Google Maps API to embed a functional google map into one of your pages easily.

To use the Maps component, you will need to know the latitude and longitude of the location you are looking to map. These can be found easily using Google Maps (the latitude and longitude can be found in the url) or a service like itouchmap.com.

This implementation is for basic mapping only, anything complex or requiring some level of interaction should work directly on the Google Maps API in a custom JS script.

New! Open Street Maps

We also provide an alternative for use with the community-curated Open Street Maps data, using the open source Leaflet.js.

New! Geocoding

There is now a method for generating a map directly from an address searched against Google Maps, rather than lat lng coordinates.


Basic example

<section>
  <div class="map-canvas" data-latlng="-37.798535, 144.960605"></div>
</section>
      

Height width and zoom

<section>
  <div class="map-canvas" data-height="400" data-latlng="-37.798535, 144.960605" data-width="600" data-zoom="17"></div>
</section>
      

Grayscale

<section>
  <div class="map-canvas" data-grayscale="" data-latlng="-37.798535, 144.960605"></div>
</section>
      

Pins

You can add multiple pins to the map by separating their coordinates with pipes (|) inside the data-pin attribute.

<p>You can add multiple pins to the map by separating their coordinates with pipes (<code>|</code>) inside the <code>data-pin</code> attribute.
</p>
<section>
  <div class="map-canvas" data-latlng="-37.798535, 144.960605" data-pin="-37.798535, 144.960605|-37.798048, 144.960946"></div>
</section>
      

Geocode

<section>
  <div class="map-canvas" data-address="780 Elizabeth St, Parkville"></div>
</section>
      

All options

<section>
  <div class="map-canvas" data-address="780 Elizabeth St, Parkville" data-grayscale="" data-height="400" data-pin="-37.798535, 144.960605" data-width="600" data-zoom="17"></div>
</section>
      

Openstreetmap

<section>
  <div class="map-canvas" data-leaflet-latlng="-37.798535, 144.960605" data-pin="-37.798535, 144.960605|-37.798048, 144.960946" data-zoom="17"></div>
</section>
      

The above component provides a simple alternative to google maps, using Leaflet.js with Open Street Map data.

To use this provider instead, use the attr data-leaflet-latlng instead of data-latlng used in the google examples.

Differences to the gmap: height and width are not needed (this map will expand to fill its container), and there is no grayscale option at the moment. data-pin and data-zoom will work as expected.