HTML - Mapa de google dentro de canvas

 
Vista:
sin imagen de perfil

Mapa de google dentro de canvas

Publicado por Eduardo 180340@upslp.edu.mx (1 intervención) el 17/04/2019 01:43:28
Buenas,

Disculpen, necesito ayuda con este codigo, quiero hacer que al hacer click en el boton, se ejecute una funcion que me ponga un mapa, y debajo, un canvas pero con el mapa dentro, ya aparece el mapa, pero no logro hacer que aparezca dentro canvas.

Si alguien sabe como, agradeceria que me dijeran como, de antemano gracias.

Este es el codigo que llevo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder