Showing a map with a marked location

The rise of Google Maps and their excellent API popularized the embedding of maps on websites. Embedded maps have a variety of uses: displaying places that users have been to, displaying locations of events, displaying locations of stores owned by a business, and many others. Maps can be displayed along with every textual address displayed on our websites.

In this recipe we're going to make a simple map with a single location marked on it. To do this, we're going to use the Leaflet library (http://leafletjs.com/), which is a well known and widely library used by Flickr, FourSquare, Craigslist, Wikimedia, and other popular sites.

We're going to display an OpenStreetMap map layer. OpenStreetMap (http://www.openstreetmap.org/ ...

Get HTML5 Data and Services Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.