Google Maps Example

From OpenStreetMap

This example may be useful if you are Deploying your own Slippy Map. This page demonstrates how to embed OpenStreetMap tiles as a layer within a Google Map.

OpenLayers is generally recommended over the Google Maps API, since it is more in-keeping with the OSM ethos.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>OpenStreetMap</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

  <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY_HERE" type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[

  function load()
  {
    if (!GBrowserIsCompatible())
        return;

    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://tile.openstreetmap.org/{Z}/{X}/{Y}.png'});
    var tilesOsmarender = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tah.openstreetmap.org/Tiles/tile.php/{Z}/{X}/{Y}.png'});

    var mapMapnik     = new GMapType([tilesMapnik],     G_NORMAL_MAP.getProjection(), "Mapnik");
    var mapOsmarender = new GMapType([tilesOsmarender], G_NORMAL_MAP.getProjection(), "Osmarend");
    var map           = new GMap2(document.getElementById("map"), { mapTypes: [mapMapnik, mapOsmarender] });

    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter( new GLatLng(55.95, -3.19), 13);
  }

  //]]>
  </script>
</head>
<body onload="load()" onunload="GUnload()">

<div id="map" style="width: 600px; height: 600px; border:1px solid gray;"></div>

</body>
</html>