Created
October 17, 2011 23:40
-
-
Save strongwave/1294209 to your computer and use it in GitHub Desktop.
A Demo Drawing Google Map on Canvas Tag for HTML5
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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¢er=-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¢er=" + 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