Google Maps Overlay Map Type

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&amp;sensor=false" type="text/javascript"></script>

<div id="map"></div>

CSS

html, body {height: 100%;}
body {margin:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#222; background-color: #ddd; line-height:15px;}

#map {width:100%; height:100%;}

#map .ctrl {background:#fff; border-radius:2px; box-shadow:0 1px 4px -1px rgba(0, 0, 0, 0.3); height:28px; min-width:28px; width:28px; color:#222; white-space:nowrap; line-height:28px; cursor:pointer;}

#map .reliefCtrl {position:relative; font-size:11px; padding:2px 10px 0 1px; height:31px; width:auto; margin-top:10px; box-sizing:border-box;}
#map .reliefCtrl:hover {background:#EBEBEB;}
#map .reliefCtrl .cb {position:relative; line-height:0; font-size:0px; margin:7px 4px 0 8px; display:inline-block; background-color:#fff; border:1px solid #C6C6C6; border-radius:1px; width:13px; height:13px;}
#map .reliefCtrl.act .cb:before {content:""; display:block; background:...

JavaScript

var map; 

function init () {
    var options, type;
    var mapTypeIds = [];

    for(type in google.maps.MapTypeId) {
        mapTypeIds.push(google.maps.MapTypeId[type]);
    }
    mapTypeIds.push("OSM");

    options = {
        zoom: 10,
        center: new google.maps.LatLng(50.631181,12.306088),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            mapTypeIds: mapTypeIds,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        panControl: false,
        zoomControl: true,
        zoomControlOptions: {position: google.maps.ControlPosition.LEFT_TOP},
        streetViewControl:true,
        streetViewControlOptions: {position: google.maps.ControlPosition.LEFT_TOP},
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        draggableCursor: 'crosshair'
    };

    map = new google.maps.Map(document.getElementById('map'), options);

    // OSM Maptype
    map.mapTypes.set("OSM", new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) {
            return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
        },
        tileSize: new google.maps.Size(256, 256),
        name: "OSM",
        alt: 'Open Street Map',
        maxZoom: 18
    }));

}


$(init);