Friday, 21 June 2013

Three simple ways to embed maps in a website or blog

Page Redirection

This blog has moved to a new home, if you are not redirected automatically, follow the link to

Last week a major debris flow struck the town of Kedarnath, an important Hindu pilgrimage destination in the Uttarakhand region of northern India. One week on, details of the event are ever so slowly beginning to emerge, although the remoteness of Kedarnath, ongoing flooding within the region, and significant damage to infrastructure throughout Uttarakhand, means that much of the information necessary to evaluate both what took place, and assess ongoing risks, remains unknown. The government currently estimates perhaps 10,000 people remain isolated in the valley, while the number of casualties is likely to be in the thousands, and the nature of the hazard remains speculative.

A social media image of the temple at Kedarnath following the debris flow last week

Unfortunately this imprecise picture is common in the period immediately following such disasters, as the chaotic nature of the event disrupts critical infrastructure and information channels. Recently, however, social media networks have begun to fill the gap, as the unregulated nature of the networks allows the information channels to form somewhat organically, as in the case of Uttarakhand, where feeds from people on the ground via Twitter, governmental agencies on Facebook, affected communities using web resources such as Google Person Finder, and data collation on informal blogs are playing a critical role in shaping the response of the region.

The community-driven nature of these information channels means that they can better respond to suit community needs than more formally structured official information channels. Although both methods of communication are important, they serve different purposes, and in some cases the rapid evolution of community-developed information feeds can provide a better, more locally relevant service, than that provided by the state. An example of this is the Canterbury Quake Live website, which was privately set up after the 2010 Canterbury earthquake to collate and disseminate information from three government agencies. Despite these agencies all providing excellent online services, the unique combination and intuitive presentation of the information on a single site suited the residents of Canterbury - This played a key role in educating and informing residents, and three years on, this site remains a principal source of earthquake information, receiving hundreds of visitors daily.

A snapshot of 30 day TRMM rainfall anomalies projected onto Google Earth using the techniques described in this post (data credit: NASA, NOAA)

As natural disasters are inherently widespread events; accurate, clear, and up-to-date presentation of spatial data is an important component of developing information channels. Today we are fortunate to have a number of freely available global mapping services which offer the opportunity for users to relatively simply become involved in the mapping process, and in the case of natural disasters, develop tools to compile or present relevant data in real-time. Although the process is not difficult, these services still appear intimidating to most people. In this post I hope to show how simple it can be to take control of online geodata by presenting three ways to incorporate data on a website using the Google Maps API.

Static Maps API

The Static Maps API allows you to embed a Google Maps image on your webpage without requiring a screenshot or complicated code. This uses a single line of code (see the snippet below the map), within which you can include a number of parameters to style the map appearance. Google provides a handy description of the available parameters on their developers site, however, to quickly get started you can simply copy the code from below and paste it into your website.

Changing the numbers following the 'zoom=' (values from 1 to 21+) increase the zoom from the globe to individual buildings) and 'center=' (as decimal latitude and longitude) parameters will reposition the map. The 'maptype=' parameter is consistent for all the Maps API services, and allows you to change the style of the displayed map from 'roadmap' to 'terrain', 'satellite', or 'hybrid'.

Click to expand/collapse the code for the above map

HTML iframe

An HTML iframe is probably the most efficient means of embedding a custom interactive map into a website. As opposed to the static map above, using the API within an iframe allows users to interact with the map, scrolling, zooming, and changing view modes within the same map. The html required to embed an iframe map in a website also consists of a single line of text, which in this case you can generate using the 'Get link' button on the Google Maps page.

The frame provides a virtual container in which the map code can run, making layout simple, and reducing compatibility issues (see Line & Pixel for a more detailed description of iframes for Google Maps). The iframe uses the full Google Maps API, with abbreviated parameter names to keep the html short. In the example script below I specify the latitude and longitude of the map center following the 'll=' identifier, and use 'q=' to add a pointer at the same location. Strangely I can't find the Google link listing the available parameters, but they are described on this page.

Click to expand/collapse the code for the above map

Google Maps API

The third possibility is by far the most versatile, though requires a small amount of scripting to set up. This allows you to make full use of the Maps v3 API from Google, providing a large amount of creative control with the ability to incude features such as map overlays, historical imagery, and kml layers; although for (some complicated) compatibility issues an extension of the API is required to access to Google Earth functionality within the map window. The trade-off is a reduction in compatibility, as some mobile platforms do not fully support the additional data types, and the Earth API requires a free plug-in to operate in some browsers. One of the easiest resources to begin learning about Google Maps API is the tutorial at, their introduction is clear and simple, and combined with the fantastic example codes at the Google Code Playground provides more-or-less all the necessary details to start users creating their own maps.

Click to expand/collapse the code for the above map

Spatial data for the Uttarakhand monsoon

Although any of these methods can be useful for quickly presenting spatial information, the Maps API is particularly useful for bringing together some of the complex factors associated with the natural disaster. Below is an example created for the Uttarakhand monsoon using a slightly more complicated implementation of the API described above to present data from the Tropical Rainfall Measuring Mission (TRMM) alongside pre- and post-event Landsat 8 imagery provided to the Landslide Blog by Robert Simmon of the Earth Observatory at NASA. TRMM produces live updates of historical and forecast precipitation information as kml files which I have directly linked to the below map. The individual overlays can be switched on and off using the check boxes below, and viewed in 3D using the Earth style - this is particularly useful for the satellite images, though you need to zoom in to the placemark to see them. Any new geodata (such as new satellite images from the region, transport hazards, or flooding information) can be included with this method, which I think could relatively easily be adapted to provide diverse spatial information to people such as those in the Uttarakhand region.

A full-screen version of the map is available from this link.

Additional layers[-]

Disclaimer: All the code in this post was put together with just 1 week of internet research. I am not an HTML programmer, and welcome any comments to improve the content.