При работе с OpenLayers — первоочередная задача указать базовый слой. OSM, которые предлагается по умолчанию — редко удовлетворяет требованиям — поэтому в этой статье пример создания базовых слоёв с GoogleMaps.
layers: [
new ol.layer.Tile({
id: 'l0',
title: "
Google Road Names",
type: 'base',
visible: ( baseLayer == 'l0' ),
source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=h&x={x}&y={y}&z={z}' }),
}),
new ol.layer.Tile({
id: 'l1',
title: "
Google Road Map",
type: 'base',
visible: ( baseLayer == 'l1' ),
source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}' }),
}),
new ol.layer.Tile({
id: 'l2',
title: "
Google Satellite",
type: 'base',
visible: ( baseLayer == 'l2' ),
source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=s&hl=pl&&x={x}&y={y}&z={z}' }),
}),
new ol.layer.Tile({
id: 'l3',
title: "
Google Satellite & Roads",
type: 'base',
visible: ( baseLayer == 'l3' ),
source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}' }),
}),
new ol.layer.Tile({
id: 'l4',
title: "
Google Terrain",
type: 'base',
visible: ( baseLayer == 'l4' ),
source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=t&x={x}&y={y}&z={z}' }),
}),
new ol.layer.Tile({
id: 'l5',
title: "
Google Terrain & Roads",
type: 'base',
visible: ( baseLayer == 'l5' ),
source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=p&x={x}&y={y}&z={z}' }),
}),
new ol.layer.Tile({
id: 'l6',
title: "
Google Road without Building",
type: 'base',
visible: ( baseLayer == 'l6' ),
source: new ol.source.TileImage({ url: 'http://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}' }),
})
]
В принципе по примеру всё должно быть ясно — описание слоёв — в поле title.
Чем отличаются sourc-ы — можно посмотреть здесь.