Chris Mendez in Javascript, For Developers, Geo

Creating a Static Google Map

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.

<!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" />
    <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>

        <!-- 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(){
            var geo = navigator.geolocation;
            if( geo ){
                //Used for Static Maps
                geo.watchPosition( showLocation, mapError, { timeout: 5000, enableHighAccuracy: true } );
            }

            function createStaticMarker( markerColor, markerLabel, lat, lng ){
                return "&markers=color:" + markerColor + "|label:" + markerLabel + "|" + lat + "," + lng;               
            }

            function createStaticMap( position ){
                var lat = position.coords.latitude;
                var lng = position.coords.longitude;
                var zoom = 20;
                var sensor = true;

                var img = $("<img>");
                    img.attr( { src: "http://maps.google.com/maps/api/staticmap?" +
                                "center=" + 
                                lat + "," +
                                lng + 
                                "&zoom=" + zoom + 
                                "&size=" + mapWidth + "x" + mapHeight + 
                                createStaticMarker( "blue", "1", lat, lng ) + 
                                "&sensor=" + sensor } );
                    return img;
            }

            function showLocation( position ){
                var lat = position.coords.latitude;
                var lng = position.coords.longitude;
                var latlng = new google.maps.LatLng( lat, lng );

                $("#map").html( createStaticMap( position ) )

            }

            function mapError( e ){
                var error;
                switch( e.code ){
                    case 1: 
                        error = "Permission Denied";
                    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>  

Resources