Use the map tiles with Google Maps

If you'd prefer to use Google Maps rather than OpenLayers (the technology we use), then you can put the OpenStreetMap tiles straight into your Google Map anyway. This gives you all the rich detail of our maps, instead of the very basic Google Maps tiles.

The code

All you need is four lines of code to set-up the code and credits, and then a slightly modified function when setting up the map:

var copyOSM = new GCopyrightCollection("<a href=\"http://www.openstreetmap.org/\">OpenStreetMap</a>");
copyOSM.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, " "));
var tilesMapnik = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://b.tile.openstreetmap.org/{Z}/{X}/{Y}.png'});
var mapMapnik = new GMapType([tilesMapnik], G_NORMAL_MAP.getProjection(), "Sutton Green Map");
var map = new GMap2(document.getElementById("map_canvas"), {draggableCursor: 'crosshair', draggingCursor: 'hand', mapTypes: [mapMapnik, G_HYBRID_MAP]}); map.setCenter(new GLatLng(51.363, -0.179), 13); map.setUIToDefault();

The result