Harry Wood


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
x
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>OpenStreetMap with Google maps</title>
<style type="text/css">
html, body, #googft-mapCanvas {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
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>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3"></script>
<script type="text/javascript">
  var map;
  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);
  function osmCreditClicked(map) {
    credits = document.getElementById('osmcredits');
  
    mapParam = 'map=' + map.getZoom() + '/' +
      map.getCenter().lat() + '/' + map.getCenter().lng();
  
    osmURL = 'https://www.openstreetmap.org/#' + mapParam;
    noteURL = 'https://www.openstreetmap.org/note/new#' + mapParam;
  
    small_credits = '\
      <div style="font-size:0.9em; cursor: pointer;" title="Click to expand OpenStreetMap details"> \
      <img valign="middle" src="https://wiki.openstreetmap.org/w/images/thumb/' +
      '7/79/Public-images-osm_logo.svg/24px-Public-images-osm_logo.svg.png"> \
      <span style="font-size:1.2em; color:BLACK; cursor: hand; opacity: 0.6; filter: alpha(opacity=60); text-shadow: -2px 0 #FFF, 0 2px #FFF, 2px 0 #FFF, 0 -2px #FFF;"> \
      <b>OpenStreetMap</b> base-map</span> \
      </div>';
  
    big_credits = ' \
      <div style="font-size:0.7em; background:WHITE; padding:6px;"> \
      <div style="float:left; padding:2px;"> \
      <a href="' + osmURL + '"> \
      <img src="https://wiki.openstreetmap.org/w/images/thumb/7/79/' +
      'Public-images-osm_logo.svg/64px-Public-images-osm_logo.svg.png" /></a> \
      </div> \
      Base map by <b><a href="' + osmURL + '">OpenStreetMap</a></b>, \
      a free and <a href="https://www.openstreetmap.org/copyright">open \
      licensed (OdBL)</a> map of the world created by volunteers, mapping \
      their own neighbourhoods.<br> \
      <a href="https://www.openstreetmap.org/welcome" title="Welcome to our mapping community">Contribute</a> &nbsp; \
      <a href="https://donate.openstreetmap.org" title="Donate to the OpenStreetMap Foundation">Donate</a> &nbsp; \
      <a href="' + noteURL + '" title="Add a note at this location">Report a problem</a><br> \
      <br> \
      OpenStreetMap displayed here using google maps javascript\
      </div>'
  
    if (credits.innerHTML==small_credits) {
      credits.innerHTML = big_credits;
      credits.style.fontSize = '1.2em';
    } else {
      credits.innerHTML = small_credits;
      credits.style.fontSize = '1em';
    }
  }
</script>
</head>
<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