public
Last active

A Demo Drawing Google Map on Canvas Tag for HTML5

  • Download Gist
getCurrentPosition_canvas.html
HTML
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
jQuery(window).ready(function(){
g_initialize();
jQuery("#findLocationBtn").click(initiate_geolocation);
});
function g_initialize() {
var google_tile = "http://maps.google.com/maps/api/staticmap?sensor=false&center=-34.397,150.644&zoom=8&size=300x400"
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = google_tile;
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
}
}
 
function initiate_geolocation() {
navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);
}
 
function handle_errors(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED: alert("user did not share geolocation data");
break;
 
case error.POSITION_UNAVAILABLE: alert("could not detect current position");
break;
 
case error.TIMEOUT: alert("retrieving position timed out");
break;
 
default: alert("unknown error");
break;
}
}
function handle_geolocation_query(position)
{
var google_tile = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + position.coords.latitude + "," +
position.coords.longitude + "&zoom=14&size=300x400&markers=color:blue|label:U|" +
position.coords.latitude + ',' + position.coords.longitude;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = google_tile;
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
}
}
</script>
</head>
<body>
<div>
<button id="findLocationBtn" >Draw My Location on Google Map</button>
</div>
<canvas id="myCanvas" width="300px" height="400px" style="border:1px solid grey;">
</canvas>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.