Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A Demo Drawing Google Map on Canvas Tag for HTML5
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.