Posted By

chrisaiv on 03/24/11


Tagged

jquery html5


Versions (?)

Who likes this?

10 people have marked this snippet as a favorite

kate
jarc100
colinrei
wimster
elgamine
Beppoi
unibox
Priestd09
mrb23771
oscarlgarcia


HTML5: Creating a Static Google Map


 / Published in: HTML
 

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

  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
Posted By: wilberthackel on May 2, 2016

f once in most instances.The seniors often enjoy audios because they don't really cause a persons vision strain in regular novels.Many golden-agers use audio in the form of great method of obtaining entertainment and additional education. There is great stereo book CD AND DVD rental headings for chf once in most instances.The seniors often enjoy audios because they don't really cause a persons vision strain in regular novels.Many golden-agers use audio in the form of great method of obtaining entertainment and additional education.

There is great stereo book CD AND DVD rental headings for children that should entertain these people while child sitter was in charge or whenever they are riding in a very car for the long distance trip.These mp3 audio books are an excellent option for improving that concentration together with listening expertise of younger people.Some good titles on mp3 audiobooks for teens have unique rhymes and also engaging memories.There can be titles intended for small infants, and there is other post titles that teenagers will like.The adolescent children might even be prepared to listen to many of its English tasks by renting several of the classics in audio.

You need to login to post a comment.