<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function mapa() {
var mapProp= {
center:new google.maps.LatLng(22.122512099999998, -100.98636359999999),zoom:5,};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var c = document.getElementById("mycanvas");
var ctx = c.getContext("webgl2");
var img = document.getElementById("googleMap");
ctx.drawImage(img,0,0);
}
</script>
</head>
<body>
<h1>Mapa de google</h1>
<div id="googleMap" style="width:640px;height:400px;"></div>
<p>Mapa en Canvas</p>
<canvas id="mycanvas" width="640" height="400"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br>
<button onclick="mapa()">Mapa</button>
</body>
</html>