OpenStreetMap with Google maps

Presenting OpenStreetMap (tiles) within google maps API (v3). This works around the google logo and 'terms' link rather than hiding it. We add similar looking OpenStreetMap credit, and with expanding osm credits info

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>OpenStreetMap with Google maps</title>

div#googlenote {
  color: black;
  padding: 0px;
  z-index: 1000;
  position: absolute;
  left: 74px;
  bottom: 4px;
  opacity: 0.6;
  filter: alpha(opacity=60);
  text-shadow: -2px 0 #FFF, 0 2px #FFF, 2px 0 #FFF, 0 -2px #FFF;
  font-family: Product Sans, Relish, Helvetica, Arial, sans-serif; 
}

div#osmcredits {
  padding: 0px;
  z-index: 1000;
  position: absolute;
  left: 5px;
  bottom: 28px;
  cursor: pointer;
  max-width:380px;
  font-family: Product Sans, Relish, Helvetica, Arial, sans-serif; 
}
</style>

function initialize() {
    google.maps.visualRefresh = true;
    var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
      (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
    if (isMobile) {
      var viewport = document.querySelector("meta[name=viewport]");
      viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
    }
    var mapDiv = document.getElementById('googft-mapCanvas');

map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(51.8368, -0.5389),
      zoom: 6,
      mapTypeId: 'OSM',
      mapTypeControl: false,
      streetViewControl: false
    });

map.mapTypes.set("OSM", new google.maps.ImageMapType({
      getTileUrl: function(coord, zoom) {
        // "Wrap" x (logitude) at 180th meridian properly
        var tilesPerGlobe = 1 << zoom;
        var x = coord.x % tilesPerGlobe;
        if (x < 0) x = tilesPerGlobe+x;
        return "http://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png";
      },
      tileSize: new google.maps.Size(256, 256),
      name: "OpenStreetMap",
      maxZoom: 18
    }));
  }

google.maps.event.addDomListener(window, 'load', initialize);

<body onLoad="javascript:osmCreditClicked(map);">
  <div id="googft-mapCanvas"></div>
  <div id="googlenote" title="OpenStreetMap maps displayed using google maps javascript mapping library">maps display</div>
  <div id="osmcredits" onClick="osmCreditClicked(map);"><b>OpenStreetMap</b> base-map</div>
  
</body>
</html>

view directly

Home
Blog
About
Maps
Other
Contact

Harry Wood

OpenStreetMap with Google maps