HTML5: Creating a Static Google Map


/ Published in: HTML
Save to your folder(s)

This mini experiment simply shows how to create a static Google Map with a Marker based on a user's Geo Location. This was designed specifically for Safari Mobile


Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" />
  5. <title>Geo Location</title>
  6.  
  7. <style type="text/css" media="screen">
  8. html{ height: 100%; }
  9. body{ height: 100%; margin: 0; padding: 0; }
  10. #map{ width: 100%; height: 100%; }
  11. </style>
  12.  
  13. <!-- jQuery Min -->
  14. <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  15.  
  16. <!-- Google Maps -->
  17. <script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  18.  
  19. <script charset="utf-8" type="text/javascript">
  20. mapWidth = screen.width;
  21. mapHeight = screen.height;
  22.  
  23. $(document).ready(function(){
  24. var geo = navigator.geolocation;
  25. if( geo ){
  26. //Used for Static Maps
  27. geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
  28. }
  29.  
  30. function createStaticMarker( markerColor, markerLabel, lat, lng ){
  31. return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng;
  32. }
  33.  
  34. function createStaticMap( position ){
  35. var lat = position.coords.latitude;
  36. var lng = position.coords.longitude;
  37. var zoom = 20;
  38. var sensor = true;
  39.  
  40. var img = $("<img>");
  41. img.attr( { src: "http://maps.google.com/maps/api/staticmap?" +
  42. "center=" +
  43. lat + "," +
  44. lng +
  45. "&zoom=" + zoom +
  46. "&size=" + mapWidth + "x" + mapHeight +
  47. createStaticMarker( "blue", "1", lat, lng ) +
  48. "&sensor=" + sensor } );
  49. return img;
  50. }
  51.  
  52. function showLocation( position ){
  53. var lat = position.coords.latitude;
  54. var lng = position.coords.longitude;
  55. var latlng = new google.maps.LatLng( lat, lng );
  56.  
  57. $("#map").html( createStaticMap( position ) )
  58.  
  59. }
  60.  
  61. function mapError( e ){
  62. var error;
  63. switch( e.code ){
  64. case 1:
  65. error = "Permission Denied";
  66. break;
  67. case 2:
  68. error = "Network or Satellites Down";
  69. break;
  70. case 3:
  71. error = "GeoLocation timed out";
  72. break;
  73. case 0:
  74. error = "Other Error";
  75. break;
  76. }
  77. $("#map").html( error );
  78. }
  79.  
  80.  
  81. });
  82. </script>
  83.  
  84. </head>
  85. <body>
  86. <div id="map">
  87.  
  88. </div>
  89. </body>
  90. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.