Skip to content

Instantly share code, notes, and snippets.

@strongwave

strongwave/getCurrentPosition_canvas.html

Created October 17, 2011 23:40
Download ZIP

Revisions

  1. strongwave revised this gist Oct 19, 2011. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions getCurrentPosition_canvas.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,11 +2,26 @@
    <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);
    }
  2. strongwave revised this gist Oct 18, 2011. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions getCurrentPosition_canvas.html
    View file
    Original file line number Diff line number Diff line change
    @@ -48,9 +48,7 @@
    <div>
    <button id="findLocationBtn" >Draw My Location on Google Map</button>
    </div>
    <div>
    <canvas id="myCanvas" width="300px" height="400px" style="border:1px solid grey;">
    </canvas>
    </div>
    </body>
    </html>
  3. strongwave revised this gist Oct 18, 2011. 2 changed files with 56 additions and 38 deletions.
    38 changes: 0 additions & 38 deletions canvasGMap.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,38 +0,0 @@
    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    function loadCanvas(dataURL){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // load image from data url
    var imageObj = new Image();
    imageObj.onload = function(){
    context.drawImage(this, 0, 0);
    };

    imageObj.src = dataURL;
    }

    window.onload = function(){
    // make ajax call to get image data url
    var request = new XMLHttpRequest();
    request.open("GET", "http://maps.google.com/maps/api/staticmap?sensor=false&center=37.354107,-121.955235&zoom=14&size=300x400&markers=color:blue|label:S|37.354107,-121.955235", true);
    request.onreadystatechange = function(){
    if (request.readyState == 4) { // Makes sure the document is ready to parse.
    if (request.status == 200) { // Makes sure it's found the file.
    loadCanvas(request.responseText);
    }
    }
    };
    request.send(null);
    };
    </script>
    </head>
    <body onmousedown="return false;">
    <canvas id="myCanvas" width="578" height="200" border: 1px solid #9C9898;>
    </canvas>

    </body>
    </html>
    56 changes: 56 additions & 0 deletions getCurrentPosition_canvas.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
    jQuery(window).ready(function(){
    jQuery("#findLocationBtn").click(initiate_geolocation);
    });

    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>
    <div>
    <canvas id="myCanvas" width="300px" height="400px" style="border:1px solid grey;">
    </canvas>
    </div>
    </body>
    </html>
  4. strongwave created this gist Oct 17, 2011.
    38 changes: 38 additions & 0 deletions canvasGMap.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    function loadCanvas(dataURL){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // load image from data url
    var imageObj = new Image();
    imageObj.onload = function(){
    context.drawImage(this, 0, 0);
    };

    imageObj.src = dataURL;
    }

    window.onload = function(){
    // make ajax call to get image data url
    var request = new XMLHttpRequest();
    request.open("GET", "http://maps.google.com/maps/api/staticmap?sensor=false&center=37.354107,-121.955235&zoom=14&size=300x400&markers=color:blue|label:S|37.354107,-121.955235", true);
    request.onreadystatechange = function(){
    if (request.readyState == 4) { // Makes sure the document is ready to parse.
    if (request.status == 200) { // Makes sure it's found the file.
    loadCanvas(request.responseText);
    }
    }
    };
    request.send(null);
    };
    </script>
    </head>
    <body onmousedown="return false;">
    <canvas id="myCanvas" width="578" height="200" border: 1px solid #9C9898;>
    </canvas>

    </body>
    </html>