Examples for Use Case: Display a location on a map

The map viewers here are displaying the location of CERN, birthplace of the web:

CERN
Esplanade des Particules 1
1217 Meyrin
Switzerland
latitude: 6.054893732070923
longitude: 46.2334537001

The embed codes were generated by first searching for the address on the services' own map user interfaces, and then using their HTML embed code option (with default options). However, most of the services also have an option to construct the embedded map URL with human-readable HTML, although it may require a developer's API key.

The client-side frameworks mostly require the location to be set using latitude and longitude values.

Some of the viewers by default display a location point marker for the searched address. See examples of adding location markers for how to add point markers with the other services (where possible).

Jump to section…

Google Maps embed

OpenStreetMap embed

Bing Maps embed

MapBox Studio embed

Leaflet.js (with OpenStreetMap tiles)

OpenLayers (with OpenStreetMap tiles)

Google Maps API

Bing Maps Control API

MapKit JS (Apple Maps) API

Mapbox GL JS API

TomTom Maps SDK for Web with vector maps

D3 Geographies APIs