This simple example will access your GeoLocation on mobile Safari and place a marker using Google Maps.
<!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" />
<title>Geo Location</title>
<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 -->
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!-- Google Maps -->
<script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<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>
Subscribe to new posts
Processing your application
Please check your inbox and click the link to confirm your subscription
There was an error sending the email