// Where you want to render the map.
var element = document.getElementById('map');

// Height has to be set. You can do this in CSS too.
element.style = 'height:300px;';

// Create Openlayers map on map element.
var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: element,
 		controls: ol.control.defaults().extend([
//       new ol.control.LayerSwitcher(),
		new ol.control.MousePosition({
				projection: 'EPSG:4326',
				coordinateFormat: function(coordinate) {
     			 return ol.coordinate.format(coordinate, '{x}, {y}', 4);
    		},
			//ol.coordinate.toStringXY,
		}),
// 		new ol.control.OverviewMap({layers: [baseLayersGroup]}),
		new ol.control.ScaleLine(),
		  //new ol.control.ScaleLineUnits0(),
		  //new ol.control.ControlDrawFeatures(vector_draw, optionsControlDraw),
		  //new ol.control.ControlDrawButtons(vector_layer, opt_options),
// 		  new ol.control.ZoomSlider(),
		  //new ol.control.Attribution(),
//  		  new ol.control.MousePosition(),
// 		 new ol.control.ZoomToExtent(),
// 		new ol.control.FullScreen()
		]),
        view: new ol.View({
            center: [-135846.63, 891762.35],
//             center: [-1.3605877812500313, 10.401734198145082],
          zoom: 6
        })
      });

// Target's GPS coordinates.