Chris Mendez in Geo, For Developers, Javascript

Create a Dynamic Google Map Site w/ Marker for iPhone

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>