jQuery + google maps + Elevation

playing with google maps v3 events, jQuery, icons from http://google-maps-icons.googlecode.com

by val2048

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css">
<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<div id='container'>
    <div id="map" class="map"></div>
    <button id='report'>Report</button>
    <textarea id="markers"></textarea>
</div>

CSS

#map {
    width: 320px;
    height: 480px;
    float:left;
}
#report {
  
}
#markers {
    float:left;
    height: 480px;
}
#container {
    width: 600px;
}

JavaScript

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'http://openlayers.org/en/v3.0.0/examples/data/icon.png'
    }))
});

var vectorSource = new ol.source.Vector({
    features: []
});
var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});
var markers = [];

var map = new ol.Map({
    interactions: ol.interaction.defaults().extend([
    new ol.interaction.DragRotateAndZoom()]),
    layers: [
    new ol.layer.Tile({
        source: new ol.source.MapQuest({
            layer: 'osm'
        })
    }), vectorLayer],
    //renderer: exampleNS.getRendererFromQueryString(),
    target: 'map',
    view: new ol.View({
        center: [-8853548.369090088, 5439251.656893939],
        zoom: 16
    })
});

map.on('click', function (e) {
    if (e.originalEvent.altKey) {
        var coordinate = e.coordinate;
        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(coordinate)
        });
        iconFeature.setStyle(iconStyle);
        vectorSource.addFeature(iconFeature);
        markers.push(coordinate);
    }

});

$('#report').click(function () {
    var view = map.getView();
    var src = view.getProjection();
    var dst = new ol.proj.get('EPSG:4326');
    var viewport = map.getViewport();
    var c = function (pt) {
        pt = new ol.geom.Point(pt);
        pt = pt.transform(src, dst);
        return pt.getCoordinates();
    };
    var ca = function (pts) {
        return $.map(pts, function(v) { return [c(v)];});
    };
    var boundingBox = [
    (map.getCoordinateFromPixel([0, 0])), (map.getCoordinateFromPixel([0, viewport.offsetHeight])), (map.getCoordinateFromPixel([viewport.offsetWidth, 0])), (map.getCoordinateFromPixel([viewport.offsetWidth, viewport.offsetHeight]))];
    c(view.getCenter());
    $('#markers').text(JSON.stringify({
       ...