strongwave / getCurrentPosition_canvas.html

Created October 17, 2011


    
    View getCurrentPosition_canvas.html 
  
  
      getCurrentPosition_canvas.html
    
    
        Raw
      
    
    File suppressed. Click to show.
  
  
            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>