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/) is a free Wikipedia-like collaboratively created street map with great coverage.
We're also going to add a description balloon, which would be displayed when the placemark is clicked.
How to do it...
Let's write the HTML and JavaScript...
