Markers

Markers

Custom icons

Marker Clusterer

Heatmaps

New HeatmapLayer in the Maps API

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization">
</script>
var heatmap = new google.maps.visualization.HeatmapLayer({
  data: [
    new google.maps.LatLng(1, 2),
    new google.maps.LatLng(3, 4),
    new google.maps.LatLng(5, 6)
  ],
  map: map
});
google.maps.event.addListener(map, 'mousemove', function(e) {
  heatmap.getData().push(e.latLng);
});

New Symbols in the Maps API

new google.maps.Marker({
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 10,
    strokeColor: 'white',
    fillColor: 'blue',
    fillOpacity: 1
  },
  ...
});

Adding symbols to polylines

new google.maps.Polyline({
  path: ...,
  icons: [{
    icon: {
      path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
      strokeColor: '#ff0000',
      scale: 4
    },
    offset: '50px',
    repeat: '100px'
  }],
  ...
});
icons: [{
  icon: {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
  },
  repeat: '0'
}]
icons: [{
  icon: {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
  },
  repeat: '25%'
}]
icons: [{
  icon: {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
  },
  repeat: '50px'
}]
icons: [{
  icon: ...
  offset: '0',
  repeat: '100px'
}]
icons: [{
  icon: ...
  offset: '50px',
  repeat: '100px'
}]

Symbols with SVG path data

icons: [{
  icon: {
    path: 'M 0 0 0 20'
  },
  offset: '10%'
}, {
  icon: {
    path: 'M 0 0 0 15'
  },
  offset: '11%'
}]

Polyline encoding

google.maps.geometry.encoding.encodePath([
  new google.maps.LatLng(0.3790, 0.5081),
  new google.maps.LatLng(0.8294, 0.6400),
  new google.maps.LatLng(0.4009, 0.8486),
  new google.maps.LatLng(0.4449, 1.2661),
  new google.maps.LatLng(0.1263, 0.9201),
  new google.maps.LatLng(-0.2966, 1.1453),
  new google.maps.LatLng(-0.0604, 0.6839),
  new google.maps.LatLng(-0.2856, 0.2774),
  new google.maps.LatLng(0.0824, 0.4147),
  new google.maps.LatLng(0.3240, -0.0247)
]);
"w_iAsfbB_~vAkwXburAwvg@_rGkppAff}@nqbAbrqAo~j@gcm@vbyAn~j@rknA_{fAcyY_en@fytA"

Polyline decoding

google.maps.geometry.encoding.decodePath(
    "w_iAsfbB_~vAkwXburAwvg@_rGkppAff}@nqbAbrqAo~j@gcm@vbyAn~j@rknA_{fAcyY_en@fytA");

Styled maps

A Master Class in Styling: June 28, 4:00PM–5:00PM in Room 1

Recap: new features

  • Heatmaps
  • Symbols as markers
  • Symbols on polylines

The Bleeding Edge

The Bleeding Edge

  • Captives of older browsers
  • What can we do without them?
  • Traffic Demo

Introducing CanvasLayer

  • Open source utility library - available now!
  • Maps API overlayView, with some best practices
  • html5 <canvas> over a map

CanvasLayer construction

var myCanvasLayer = new CanvasLayer({
  map: myMap,
  update: function() { },
  ...
});
var rectLatLng = new google.maps.LatLng(40, -95);
var point = projection.fromLatLngToPoint(rectLatLng);
context.fillRect(point.x, point.y, 100, 100);
    
var scale = Math.pow(2, map.zoom);
context.scale(scale, scale);
var offset = projection.fromLatLngToPoint(canvasLayer.getTopLeft());
context.translate(-offset.x, -offset.y);
    

WebGL

  • Canvas 3D -> WebGL under the Khronos Group
  • Not OpenGL
  • OpenGL ES 2.0 (mostly)

Typical WebGL code

var canvas = document.getElementById('canvas');
var gl = canvas.getContext('experimental-webgl');
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
gl.vertexAttribPointer(aVertexPosition, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, plotPositionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, f32array, gl.STATIC_DRAW);
gl.vertexAttribPointer(aPlotPosition, 2, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

WebGL - Libraries

Input - attributes

var attributes = new Float32Array([x0, y0, x1, y1, x2, y2, x3, y3, ...]);

The WebGL pipeline - Vertex Shader

The WebGL pipeline - Vertex Shader

attribute vec2 vertpos;
attribute vec2 uv;

uniform mat4 mvp;

void main() {
  vec4 pos = vec4(vertpos, 0., 1.);

  gl_Position = mvp * pos;
}

The WebGL pipeline - gl_Position

The WebGL pipeline - primitive assembly

The WebGL pipeline - Fragment Shader

The WebGL pipeline - Fragment Shader

void main() {
  float x = gl_PointCoord[0];
  float y = gl_PointCoord[1];
  float edgeX = max(1. - step(.05, x), step(.95, x));
  float edgeY = max(1. - step(.05, y), step(.95, y));
  float edge = max(edgeX, edgeY);

  gl_FragColor = vec4(edge, edge, edge, 1.);
}

GLSL as a scripting language

Terrain Demo

Thank You!

https://developers.google.com/maps