Question

I want to draw something on a google map. So I though to put a canvas over the map, and draw stuff, just that this is blocking the interaction with the map. How can I draw something but leave the rest of the map interactive? Relevant code snippets:

Styles:

<style>
#myCanvas {
    border: 1px solid #9C9898;
}
#canvas-wrap {
    position:relative;
} /* Make this a positioned parent */
#map_canvas {
    position:absolute;
    top:0px;
    left:0px;
    z-index: -1;
}
</style>

Javascript:

<script type="text/javascript">
function loadMap() {
  var fenway = new google.maps.LatLng(42.345573,-71.098326);
  var mapOptions = {center: fenway, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function drawLine(){
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(100, 100);
  context.lineTo(400, 400);
  context.lineWidth = 9;
  context.stroke();
};

function init(){
  loadMap();
  drawLine();
}
</script>

HTML:

<div id="canvas-wrap">
  <canvas id="myCanvas" width="600px" height="600px"></canvas>
  <div id="map_canvas" style="width: 600px; height: 600px"></div>
</div>

Answer 1

Ocelot20’s answer works as long as your overlays don’t require user interaction. If they do, you need to use Google’s provided Polygon (etc) classes.

Forwarding events might work, but you’re completely at the mercy of Google not changing some minor detail of the event mechanism. And, not insignificantly, you’ll have to forward events in both directions: from Google’s map layer to your canvas, and from transparent parts of your canvas to Google’s map layer.

Ie. use a Polygon 😉