You have to make choice if you want to use vector features or tiled layer:
1) for vector features, you can use google maps api v3 and create the rooms as polygons, circles, line features... in general, to use overlays - see the documentation.
2) for tiled layers, you have to place the tiles (usualy png) on your server, create your own ImageMapType object and use it as a standard layer or overlay layer:
var mapTypeOpts = {
getTileUrl: function (coord, zoom) {
var b = zoom;
var a = coord;
return "http://www.myserver.org/tiles" +
zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
alt: 'My Layer - basic map',
name: 'My Layer',
minZoom: 15,
maxZoom: 20
};
// now there are two ways how to set this up
// 1st way - as a full layer, switchable instead of e.g. google satellite map:
this.map.setOptions({ mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN,
'My Layer'
]
}});
map.mapTypes.set('My Layer', new google.maps.ImageMapType(mapTypeOpts));
// 2nd way - use it as an overlay layer, used TOGETHER with normal google layers:
map.overlayMapTypes.push(new google.maps.ImageMapType(mapTypeOpts));
For adding custom logos and copyrights to layers look here.