Draw Google Map on Canvas
Draw Google Map on Canvas
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<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>
JavaScript
jQuery(window).ready(function(){
g_initialize();
jQuery("#findLocationBtn").click(initiate_geolocation);
});
function g_initialize() {
var google_tile = "https://www.google.com/maps/@-31.3896934,-64.2311666,14z"
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_geolocation_query);
}
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 = "https://www.google.com/maps/@-31.3896934,-64.2311666,14z";
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);
}
}