Web Maps Lite API Examples

Geocoding

Finding places

Javascript Level: Intermediate

There are many cases when we want to show some places to the user but don't know their exact location. That's where the CloudMade Geocoding service comes very handy. In this example we see how to use the CloudMade Geocoding service in Web Maps Lite to show hotels near the Buckingham Palace Garden in London:

Here's the JavaScript for the example:

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

geocoder.getLocations('hotels near Buckingham Palace Garden, London', function(response) {
	var southWest = new CM.LatLng(response.bounds[0][0], response.bounds[0][1]),
		northEast = new CM.LatLng(response.bounds[1][0], response.bounds[1][1]);
	
	map.zoomToBounds(new CM.LatLngBounds(southWest, northEast));
	
	for (var i = 0; i < response.features.length; i++) {
		var coords = response.features[i].centroid.coordinates,
			latlng = new CM.LatLng(coords[0], coords[1]);
		
		var marker = new CM.Marker(latlng, {
			title: response.features[i].properties.name
		});
		map.addOverlay(marker);
	}
});

It's a big piece of JavaScript code but don't get overwhelmed - let's see what's going on here:

1. We create a new CloudMade map:

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

2. Next we create a Geocoder object, passing it our API key once again:

var geocoder = new CM.Geocoder('BC9A493B41014CAABB98F0471D759707');

3. Then we call the CM.Geocoder#getLocations method with our query ('hotels near Buckingham Palace Garden, London') and the function that will process the response from the CloudMade Geocoding server.

geocoder.getLocations('hotels near Buckingham Palace Garden, London', function(response) {
var southWest = new CM.LatLng(response.bounds[0][0], response.bounds[0][1]),
	northEast = new CM.LatLng(response.bounds[1][0], response.bounds[1][1]);

map.zoomToBounds(new CM.LatLngBounds(southWest, northEast));

for (var i = 0; i < response.features.length; i++) {
	var coords = response.features[i].centroid.coordinates,
		latlng = new CM.LatLng(coords[0], coords[1]);
	
	var marker = new CM.Marker(latlng, {
		title: response.features[i].properties.name
	});
	map.addOverlay(marker);
}
});

4. Lets see what's going on in the response processing function. First we make a LatLngBounds object that represents the rectangular area of the map that contains the results and zoom the map to it:

var southWest = new CM.LatLng(response.bounds[0][0], response.bounds[0][1]),
	northEast = new CM.LatLng(response.bounds[1][0], response.bounds[1][1]);

map.zoomToBounds(new CM.LatLngBounds(southWest, northEast));

5. Then we go though every feature found in the response in a loop:

for (var i = 0; i < response.features.length; i++) {
	... //do something with response.features[i]
}

6. Inside the "for" loop, first we create a LatLng object in the center of the feature:

var coords = response.features[i].centroid.coordinates,
	latlng = new CM.LatLng(coords[0], coords[1]);

7. Finally we add a marker on this place with the feature title:

var marker = new CM.Marker(latlng, {
	title: response.features[i].properties.name
});
map.addOverlay(marker);

Great! Now we know what hotels to choose from when we want to live near the Buckingham Palace Garden. You can find out more about geocoding by checking out the CM.Geocoder section of our documentation. There's one more example to go - KML and GeoRSS.

JS-docs | View example