OpenStreetMap in Google Maps (hiding google credits)

Presenting OpenStreetMap (tiles) within google maps API (v3). This covers up the google icon and the google 'terms' link with a white strip at the bottom, while giving the required credit to OpenStreetMap. That avoids confusion and seems fair in terms of ownership of the map, however it means google gets no credit for the map display technology and seems likely to be in breach of their terms of use. Instead you might leave google credits in place, but add OSM credits

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>OpenStreetMap in Google Maps (hiding google credits)</title>
        <style>
            html, body, #map {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            div#footer {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 17px;
                margin: 0;
                padding: 3px;
                z-index: 2;
                background: WHITE;
            }
        </style> 
    </head>
    <body>
        <div id="map" style="float: left;"></div>
        
        <div id="footer">&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors</div>
        
        
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        
        <script type="text/javascript">
            //Google maps API initialisation
            var element = document.getElementById("map");
 
            var map = new google.maps.Map(element, {
                center: new google.maps.LatLng(57, 21),
                zoom: 3,
                mapTypeId: "OSM",
                mapTypeControl: false,
                streetViewControl: false
            });
 
            //Define OSM map type pointing at the OpenStreetMap tile server
            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 "https://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 18
            }));
        </script>
        
    </body>
</html>

view directly

Home
Blog
About
Maps
Other
Contact

Harry Wood

OpenStreetMap in Google Maps (hiding google credits)