/ Published in: HTML
This simple example will access your GeoLocation on mobile Safari and place a marker using Google Maps.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no" /> <!-- Override Default Apple Grey Bar with Black Bar --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- Make the Web app Look more Native --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- iPhone icon --> <link rel="apple-touch-icon" href="images/iphone/57x57.png" /> <!-- iPhone Splash Screen --> <link rel="apple-touch-startup-image" href="images/iphone/splashscreen.png" /> <style type="text/css" media="screen"> html{ height: 100%; } body{ height: 100%; margin: 0; padding: 0; } #map{ width: 100%; height: 100%; } </style> <style type="text/css" media="screen"> /* Target ipad Devices in Portrait Orientation */ @media screen and (device-width: 768px) and (orientation:portrait){ } @media screen and (device-width: 768px) and (orientation:landscape){ } </style> <!-- jQuery Min --> <!-- Google Maps --> <script charset="utf-8" type="text/javascript"> mapWidth = screen.width; mapHeight = screen.height; $(document).ready(function(){ //Orientation var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; $(window).bind( orientationEvent, onOrientationChange ); function onOrientationChange(){ switch( window.orientation ){ //Portrait: normal case 0: break; //Landscape: clockwise case -90: break //Landscape: counterclockwise case "180": break; //Portrait: upsidedown case "90": break; } } //GeoLocation var geo = navigator.geolocation; if( geo ){ geo.getCurrentPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } ); } function createMarker( latlng, map ){ return new google.maps.Marker( { position: latlng, map: map } ); } function createDynamicMap( latlng ){ var div = $("#map")[0]; var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; return new google.maps.Map( div, options ); } function showLocation( position ){ var lat = position.coords.latitude; var lng = position.coords.longitude; var latlng = new google.maps.LatLng( lat, lng ); var map = createDynamicMap( latlng ); var marker1 = createMarker( latlng, map ); } function mapError( e ){ var error; switch( e.code ){ case 1: error = "Permission Denied.\n\n Please turn on Geo Location by going to Settings > Location Services > Safari"; break; case 2: error = "Network or Satellites Down"; break; case 3: error = "GeoLocation timed out"; break; case 0: error = "Other Error"; break; } $("#map").html( error ); } }); </script> </head> <body> <div id="map"> </div> </body> </html>