HTML5: Create a Dynamic Google Map Site w/ Marker for iPhone


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

This simple example will access your GeoLocation on mobile Safari and place a marker using Google Maps.


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. <!-- Override Default Apple Grey Bar with Black Bar -->
  6. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  7. <!-- Make the Web app Look more Native -->
  8. <meta name="apple-mobile-web-app-capable" content="yes">
  9. <!-- iPhone icon -->
  10. <link rel="apple-touch-icon" href="images/iphone/57x57.png" />
  11. <!-- iPhone Splash Screen -->
  12. <link rel="apple-touch-startup-image" href="images/iphone/splashscreen.png" />
  13.  
  14. <title>Geo Location</title>
  15.  
  16. <style type="text/css" media="screen">
  17. html{ height: 100%; }
  18. body{ height: 100%; margin: 0; padding: 0; }
  19. #map{ width: 100%; height: 100%; }
  20. </style>
  21. <style type="text/css" media="screen">
  22. /* Target ipad Devices in Portrait Orientation */
  23. @media screen and (device-width: 768px) and (orientation:portrait){
  24.  
  25. }
  26. @media screen and (device-width: 768px) and (orientation:landscape){
  27.  
  28. }
  29. </style>
  30.  
  31. <!-- jQuery Min -->
  32. <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  33.  
  34. <!-- Google Maps -->
  35. <script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  36.  
  37. <script charset="utf-8" type="text/javascript">
  38. mapWidth = screen.width;
  39. mapHeight = screen.height;
  40.  
  41. $(document).ready(function(){
  42. //Orientation
  43. var supportsOrientationChange = "onorientationchange" in window,
  44. orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
  45.  
  46. $(window).bind( orientationEvent, onOrientationChange );
  47. function onOrientationChange(){
  48. switch( window.orientation ){
  49. //Portrait: normal
  50. case 0:
  51. break;
  52. //Landscape: clockwise
  53. case -90:
  54. break
  55. //Landscape: counterclockwise
  56. case "180":
  57. break;
  58. //Portrait: upsidedown
  59. case "90":
  60. break;
  61. }
  62. }
  63.  
  64. //GeoLocation
  65. var geo = navigator.geolocation;
  66. if( geo ){
  67. geo.getCurrentPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
  68. }
  69.  
  70. function createMarker( latlng, map ){
  71. return new google.maps.Marker( { position: latlng, map: map } );
  72. }
  73.  
  74. function createDynamicMap( latlng ){
  75. var div = $("#map")[0];
  76. var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
  77. return new google.maps.Map( div, options );
  78. }
  79.  
  80. function showLocation( position ){
  81. var lat = position.coords.latitude;
  82. var lng = position.coords.longitude;
  83. var latlng = new google.maps.LatLng( lat, lng );
  84.  
  85. var map = createDynamicMap( latlng );
  86. var marker1 = createMarker( latlng, map );
  87. }
  88.  
  89. function mapError( e ){
  90. var error;
  91. switch( e.code ){
  92. case 1:
  93. error = "Permission Denied.\n\n Please turn on Geo Location by going to Settings > Location Services > Safari";
  94. break;
  95. case 2:
  96. error = "Network or Satellites Down";
  97. break;
  98. case 3:
  99. error = "GeoLocation timed out";
  100. break;
  101. case 0:
  102. error = "Other Error";
  103. break;
  104. }
  105. $("#map").html( error );
  106. }
  107. });
  108. </script>
  109.  
  110. </head>
  111. <body>
  112. <div id="map">
  113.  
  114. </div>
  115. </body>
  116. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.