Maybe you've already heard, that Google is starting to charge a fee for using the Maps API (Google may decide you're an non-profit organization and waive the fees). That is, in my opinion, Google telling you to look for better alternatives. And thanks to the awesome effort of the OpenStreetMaps community, there is such an alternative.
Thus today's addition to the mini-tips series will tell you, how you get an OpenStreetMaps-powered map on your website.
- First you need to determine the coordinates, where you want to center, the map. You can do this with OpenRouteService.org. Just search for the address, right-click on the marker highlighting the result, and set it as e.g. your start point, that'll give you the coordinates in the start field on the left. Alternatively you can just move your pointer over a place on the map and have a look at the lower right corner, where the current coordinates for the pointer position are displayed.
- Then you need to add a few things to the website, where the card is to be
shown:
Include the OpenLayers script in the <head> of your webpage:
Add a short ECMAScript snippet right after that, which will initialize your map:
function osmInit() { document.getElementById("ol_map").style.display = 'block'; var lonLat = new OpenLayers.LonLat(13.376096, 52.518598) // Center of the map .transform( new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection ); var map = new OpenLayers.Map("ol_map"); var osmlayer = new OpenLayers.Layer.OSM(); map.addLayer(osmlayer); map.setCenter(lonLat, 16 // Zoom level ); }The first line is not needed, but I find it nice to hide the map on default, in case the user has disabled ECMAScript they haven't a large empty area somewhere on the website. The first line changes then the display value from "none" to "block". The rest is, I hope, already explained by the code itself.
- Now only two more changes are needed, first you need to add
onload="osmInit();"to your <body> tag. And afterwards an element (say a <p>) with the ID ol_map somewhere in the website <body>. You should set a width and height for that tag (style is your friend), otherwise the map might be bigger than you like.
- Done. Enjoy your free (not just as in free beer) map!
You can, of course, customize your map further by adding additional layers and changing the available options (e.g. the zoom level). If you would want to mark a location on your map, you'd need to add something like
var markers = new OpenLayers.Layer.Markers("POI1");
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(lonLat));to your ECMAScript snipped after you added the OpenStreetMaps layer. These three lines would mark the location given by the variable lonLat.
For further information, you can check out the OpenStreetMaps wiki and the OpenLayers documentation.
In case you wonder, where my coordinates from this example point, you can check. Oh, and don't forget to consider a donation to OpenStreetMaps, so the project can pay the bills for its servers.
