devdays/maps-google-sample.html

## maps-google-sample.html
<!DOCTYPE html>
<html>
<head>
    <title>Map Your Location</title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }

        #map_canvas {
            height: 85%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map_canvas"></div>
    <div id="locationinfo"></div>

    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        // Determine support for Geolocation
        if (navigator.geolocation) {
            // Locate position
            navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
        } else {
            alert('Geolocation is not enabled in your browser.');
        }

        // Success callback function
        function displayPosition(pos) {
            var mylat = pos.coords.latitude;
            var mylong = pos.coords.longitude;
            var locDiv = document.getElementById('locationinfo');
            locDiv.innerHTML = '<p>Your longitude is :' +
                mylong + ' and your latitude is ' + mylat + '</p>';

            //Load Google Map
            var latlng = new google.maps.LatLng(mylat, mylong);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            };

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

            //Add marker
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: "You are here"
            });
        }

        // Error callback function
        function errorFunction(pos) {
            alert('Oops!');
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Map Your Location</title>

	<style type="text/css">
	html, body {
	width: 100%;
	height: 100%;
	}

	#map_canvas {
	height: 85%;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map_canvas"></div>
	<div id="locationinfo"></div>

	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	// Determine support for Geolocation
	if (navigator.geolocation) {
	// Locate position
	navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
	} else {
	alert('Geolocation is not enabled in your browser.');
	}

	// Success callback function
	function displayPosition(pos) {
	var mylat = pos.coords.latitude;
	var mylong = pos.coords.longitude;
	var locDiv = document.getElementById('locationinfo');
	locDiv.innerHTML = '<p>Your longitude is :' +
	mylong + ' and your latitude is ' + mylat + '</p>';

	//Load Google Map
	var latlng = new google.maps.LatLng(mylat, mylong);
	var myOptions = {
	zoom: 15,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.HYBRID
	};

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

	//Add marker
	var marker = new google.maps.Marker({
	position: latlng,
	map: map,
	title: "You are here"
	});
	}

	// Error callback function
	function errorFunction(pos) {
	alert('Oops!');
	}
	</script>
	</body>
	</html>