This is a sketch of a proposal for a new HTML element to simplify displaying maps on a website. I’d like your comments and criticisms before I submit it.

This is born out of my frustration of using different JavaScript mapping solutions – my phone has a mapping app, why do I need to share my location with a website and their mapping provider?

At the moment, if I want to use Google Maps, or OpenStreetMap, or Carto, or any other mapping provider, I have to load in a bunch of external JavaScript and then add <div id="map"></div> to my markup.

How about we get rid of all those external libraries as a dependency? Let’s do what we did with <video> and make mapping a first class element.

It’s quite common to suggest new HTML elements based on popular <div id="..."> – that’s how we got <nav> , <footer> , <aside> , <audio> , and the like.

I’d like to propose a new tag:

<geo>

(In an ideal world, this would use the <map> element – but that has already been taken by image maps. It could equally be called <mapping> , <maps> , or similar.)

Use cases

As a user of a website, I want embedded maps on a website to offer a fast and consistent experience. As a user, I don’t want to share my location with a website. As a user, I want access to my devices’ mapping features when I view a map on the web. As a developer of a website, I want to take advantage of any in-built mapping software the user has, rather than use a 3rd party library.

Dive in!

This is a sketch of how a <geo> element could be used. This doesn’t cover all use cases, it misses out important things, it glosses over problems. This is a prototype for others to critique.

Display a map centred on a specific location

Visit our restaurant! <geo location="51.75026,-1.248338"> Your browser doesn't support interactive maps. <img src="... </geo>

Fairly simple. A block element which takes a location . It includes a fallback experience – just like the <video> element.

If the user has a mapping app installed on their device, that will be used to provide the map. That will give the user access to all the mapping features they regularly use (favourite places, routing, preferred map styles, street view).

If they don’t have a mapping app installed, the browser can provide that service – or the web developer can specify a fallback solution. Just like HTML5 Video.

Location

I envisage location= as taking any data. It is up to the mapping provider to interpret it.

<geo location="Oxford, UK"> Your browser doesn't support interactive maps. <script src="... </geo>

Zoom

A common requirement for a map is to specify a zoom level. For example, Google Maps uses zoom levels 0 – 20 – with being fully zoomed out. Similarly, OpenStreetMap uses 0 – 19.

Rather than arbitrary numbers to represent zoom, the <geo> element uses a zoom tag which defines how wide the map is in measurable units. For example zoom="5KM" shows a map with a diameter of 5 kilometres. zoom="90deg" shows a map zoomed out to show quarter of the world.

<geo location="51.75026,-1.248338" zoom="10KM"> Your browser doesn't support interactive maps. <img src="..." /> </geo>

Possible values could include degrees, kilometres, metres, and metres per pixel.

Interactivity

A website owner may not want a “slippy map” experience – in order to create a map which can’t be moved or zoomed, they can use the boolean attribute static .

<geo location="51.75026,-1.248338" zoom="10deg" static ></geo>

Markers

It is useful to put a selection of markers on a map. For example, the location of the entrance points to a venue.

<geo location="日本武道館" > <marker location="35.69391,139.7494" display="entrance"> <img src="..."> </marker> <marker location="35.69274,139.7501" display="exit"></marker> </geo>

In this case, the markers have a location tag, with an optional display tag for textual representation.

They also have an optional child which contains an image to be used as the marker.

Directions

In this example, the map shows directions from the user to the destination.

Have a drink with us: <geo location="Strangers' Bar, SW1A 0AA, UK" directions></geo>

A boolean tag. Crucially, the <geo> element doesn’t share the user’s location with the website.

Complex data (KML and geoJSON)

Both KML and geoJSON are popular ways of expressing complex spatial data. It should be possible to pass that data to the mapping software via the src= parameter.

<geo src="/data/points.json"></geo> <geo src="/data/points.kml"></geo>

Other Stuff

Wait! What about….? As I said, this is a basic skeleton description of a new element. It probably doesn’t involve your specific use case.

Just like the <video> element, this doesn’t stop a developer using a 3rd party solution if they want.

Your thoughts?