<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
        <title>
            Geolocation API – doctypehtml.net
        </title>
        <base href="http://doctypehtml.net/">
        <link rel="stylesheet" href="http://doctypehtml.net/assets/css/layout.css" type="text/css">
        <link rel="stylesheet" href="http://doctypehtml.net/assets/css/mobile.css" type="text/css" media="screen and (max-width: 780px)">
        <link href="http://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript">
</script>
        <script src="http://doctypehtml.net/assets/js/jquery.DOMWindow.js" type="text/javascript">
</script><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
        <script src="http://maps.google.com/maps/api/js?sensor=true&amp;key=ABQIAAAApI58w98iPWfY3kRwSUeY8xQ68YkQG_qXsZ3UoXoMI3aQuc_oDxRhXW-0yaqFDptD-MysiRffOXJ_vg" type="text/javascript">
</script>
        <script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript">
</script>
        <script src="http://better-geolocation-api.googlecode.com/files/geolocation.js" type="text/javascript">
</script>
        <link href="http://doctypehtml.net/html5/geolocation//css/geolocation.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <a href="http://github.com/manuelbieh/doctypehtml.net"><img style="position: absolute; top: 0; right: 0; border: 0;" src=
        "https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
        alt="Fork me on GitHub"></a>
        <div id="wrapper">
            <h1>
                <a href="/">&lt;!DOCTYPEhtml.net&gt;<br>
                HTML5/CSS3 Demos + Experiments</a>
            </h1>
            <h2>
                Geolocation API
            </h2>
            <p>
                Determine your current position using only your web browser.
            </p><script type="text/javascript">

            $(function() {
                $('#getPosition').bind('click', function() {
                        if(navigator.geolocation) {
                                navigator.geolocation.getCurrentPosition(success, error, {enableHighAccuracy: true, maximumAge: 1000});
                        } else {
                                $('#nosupport').show();
                        }
                });
            });

            function success(position) {

                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                var options = {
                        zoom: 16,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map"), options);

                var marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        title:"Your current position"
                });

            }

            function error() {
                alert('No Geolocation available or position could not be determined.');
            }

            </script><button id="getPosition">Get my position!</button>
            <p id="nosupport">
                Geolocation API is not supported by your current browser.
            </p>
            <div id="map"></div><br style="clear: both;">
        </div>
        <div>
            <a href="http://doctypehtml.net/index.html">Overview</a> – All examples are lovingly handcrafted by <a href="http://www.twitter.com/ManuelBieh">@ManuelBieh</a> | <a href=
            "http://www.manuel-bieh.de/en/">http://www.manuel-bieh.de</a>. Inspired by <a href="http://www.html5demos.com">html5demos.com</a> from the great <a href=
            "http://www.twitter.com/rem">@rem</a> | <a href="http://doctypehtml.net/viewsource/index.php?url=http://doctypehtml.net/html5/geolocation/" class="viewsource">view source</a> |
            <iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=http://doctypehtml.net/&amp;via=manuelbieh" style=
            "vertical-align: middle; width: 110px; height: 21px; overflow: hidden; border: 0;"></iframe> <iframe src=
            "http://www.facebook.com/plugins/like.php?href=http://doctypehtml.net/&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font&amp;height=21"
            style="vertical-align: middle; border:none; overflow:hidden; width:130px; height:21px; overflow: hidden; border: 0;"></iframe>
            <div class="g-plusone" data-size="medium" data-count="true"></div>
        </div><script type="text/javascript">
$('.viewsource').openDOMWindow({ 
        height:'90%', 
        width:'90%', 
        positionType:'absolute', 
        positionTop:50, 
        eventType:'click', 
        positionLeft:'5%', 
        windowSource:'iframe', 
        windowPadding:0, 
        loader:1, 
        //      loaderImagePath:'animationProcessing.gif', 
        loaderHeight:16, 
        loaderWidth:17 
        }); 
        </script><script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-16083973-9']);
        _gaq.push(['_trackPageview']);

        (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

        </script><script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
    </body>
</html>