Web Maps Lite API Examples

Info Window

Lets show some popups

Javascript Level: Beginner

You'll often want to show some information about a particular place in the map itself - that's where the info window comes in. In this example we see how to open an info window on a marker:

Here's the JavaScript for the example:

var cloudmade = new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'});
var map = new CM.Map('cm-example', cloudmade);
		
var louvre = new CM.LatLng(48.861,2.336);
map.setCenter(louvre, 16);

var marker = new CM.Marker(louvre);
map.addOverlay(marker);
		
marker.openInfoWindow(
	"<img width='200' height='267' src='http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Louvre.jpg/200px-Louvre.jpg'><br />" + 
	"<h3 style='text-align: center'><a href='http://en.wikipedia.org/wiki/Louvre'>The Louvre Museum</a></h3>");

Lets see what's going on here:

1. We create a new CloudMade map:

var cloudmade = new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'});
var map = new CM.Map('cm-example', cloudmade);

2. Next we create a new LatLng object centered on Louvre and set the map center to it:

var louvre = new CM.LatLng(48.861,2.336);
map.setCenter(louvre, 16);

3. Then we create a new Marker, similar to the one we make in the Custom Map Markers example:

var marker = new CM.Marker(louvre);
map.addOverlay(marker);

4. Finally we open an info window with a nice picture of Louvre and a link to Wikipedia from the marker. Don't forget to set width and height properties of the image for the info window to autosize correctly.

marker.openInfoWindow(
	"<img width='200' height='267' src='http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Louvre.jpg/200px-Louvre.jpg'><br />" + 
	"<h3 style='text-align: center'><a href='http://en.wikipedia.org/wiki/Louvre'>The Louvre Museum</a></h3>");

Yay! Now we have a nice picture of Louvre on the map. You can find out more about info windows by checking out the info window section of our documentation. Now lets dive into the next example - Polylines and Polygons.

JS-docs | View example