OpenLayers 3

by Nick Karnik

HTML

<link rel="stylesheet" href="http://ol3js.org/en/master/build/ol.css">
<script src="http://ol3js.org/en/master/build/ol.js"></script>
<div id="map" class="map"></div>

CSS

html, body {
    height:100%;
}
.map {
    top:0;
    bottom:0;
    width: 100%;
    height:100%;
}

JavaScript

var map = new ol.Map({
          target: 'map',
          
          renderer: 'canvas',

          controls: ol.control.defaults().extend(
          [
          new ol.control.FullScreen()]),

          interactions: ol.interaction.defaults().extend(
          [
              new ol.interaction.DragRotateAndZoom()]),

          layers: [
          new ol.layer.Tile({
              preload: Infinity,
              source: new ol.source.BingMaps({
                  key: 'AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf',
                  imagerySet: 'Aerial'
              })
          })],

          view: new ol.View2D({
              center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
              zoom: 4
          })
      });