CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Ramzi Khahil
Ramzi Khahil

Reputation: 5072

How to overlay something on a Google map, without blocking the mouse interaction?

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>

Upvotes: 1

Views: 477

Answers (2)

shovemedia
shovemedia

Reputation: 191

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 ;)

Upvotes: 1

Ocelot20
Ocelot20

Reputation: 10800

The `pointer-events' CSS attribute is what you're looking for:

#map_canvas {
    position:absolute;
    top:0px;
    left:0px;
    z-index: -1;
    pointer-events:none;
}

This will basically make the canvas transparent to mouse events.

Edit - Apparently this only applies to certain browsers. This is a more complicated but cross-browser compatible method:

Forwarding Mouse Events Through Layers

Upvotes: 1

Related Questions