Admin

admin shows google map using ol3gm

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALbL0jvSmSdVRR7h88h_riHvV6t3VIicg"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css">
<button id="target">Save features to JSON</button>
<section>
  <div id="map">
  </div>
</section>

CSS

section #map {
  margin: 5px auto;
  margin-left: 25px;
  border: 1px solid #CDD7EE;
  border-radius: 5px;
  width: 1050px;
  height: 620px;
}

JavaScript

var osm = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var features = new ol.Collection();
var source = new ol.source.Vector({
  features: features
});
var vector = new ol.layer.Vector({
  source: source,
  style: new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)'
    }),
    stroke: new ol.style.Stroke({
      color: '#ffcc33',
      width: 2
    })
  })
});
var map = new ol.Map({
  layers: [osm, vector],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});
var draw; // global so we can remove it later
var wgs84Sphere = new ol.Sphere(6378137);
action = 'Circle';
draw = new ol.interaction.Draw({
  features: features,
  type: action,
  geometryFunction: function(coordinates, geometry) {
    if (!geometry) {
      geometry = new ol.geom.Polygon(null);
    }
    var center = coordinates[0];
    var last = coordinates[1];
    var dx = center[0] - last[0];
    var dy = center[1] - last[1];
    var radius = Math.sqrt(dx * dx + dy * dy);
    var circle = ol.geom.Polygon.circular(wgs84Sphere, ol.proj.toLonLat(center), radius);
    circle.transform('EPSG:4326', 'EPSG:3857');
    geometry.setCoordinates(circle.getCoordinates());
    return geometry;
  }

});
map.addInteraction(draw);
$("#target").click(function() {
  var writer = new ol.format.GeoJSON();
  var geojsonStr = writer.writeFeatures(source.getFeatures());
  alert(geojsonStr);
});