Map (experimental) example

With markers

Adds markers to the map. Markers have popups when clicked, containing the marker name and description. name is also used for the alt attribute of the marker for screen readers.

Popup content should be minimal, as markers are currently width limited in order to be readable on small screens.

The position of the map is automatically adjusted to include all markers, so centre values and a zoom are not needed. However if only one marker is on the map, centre values and a zoom are required.

How it looks (preview)

London stations

Skip map

Loading map... This map uses JavaScript to work. To view the map, turn on JavaScript in your browser's settings.

Locations on this map

How to call this example

<%= render "components/map", {
  heading_text: "London stations",
  markers: [
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1766,
          51.5163
        ]
      },
      properties: {
        name: "Paddington Station",
        description: "Designed by Isambard Kingdom Brunel and opened in 1838."
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1236,
          51.5316
        ]
      },
      properties: {
        name: "Kings Cross station",
        description: "Opened in 1852 and built on the site of a smallpox and fever hospital."
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1632,
          51.5224
        ]
      },
      properties: {
        name: "Marylebone Station"
      }
    }
  ]
} %>