MY CODE >> Location and Map
<!DOCTYPE HTML>
<!-- Tommy Martin
    October 2013
	
	This webpage uses HTML5 and JavaScript to get a user's location and add markers with
	random points around the location.
    -->

<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
    function loadMap(){
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position){
			
            // Locations
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
			
            var lat1 = latitude + .03;
            var lng1 = longitude + .03;
			
            var lat2 = latitude - .04;
            var lng2 = longitude - .01;
			
            var lat3 = latitude - .05;
            var lng3 = longitude + .1;
			
            // Coordinates
            var coordsCurrentLocation = new google.maps.LatLng(latitude, longitude);
            var coordsStore1 = new google.maps.LatLng(lat1, lng1);
            var coordsStore2 = new google.maps.LatLng(lat2, lng2);
            var coordsStore3 = new google.maps.LatLng(lat3, lng3);
			
            // Titles
            var currentLocation = "Your Current Location";
			
            var nameOfStore1 = "Random Location";
            var storeAddress1 = "123 Greenville Ave";
			
            var nameOfStore2 = "Random Location";
            var storeAddress2 = "5342 Salem Dr";
			
            var nameOfStore3 = "Random Location";
            var storeAddress3 = "20 South Side Blvd";
			
            // Map
            var mapOptions = {
                zoom: 12,
                center: coordsCurrentLocation,
                mapTypeControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(
                    document.getElementById("mapContainer"), mapOptions
                    );
					
                //Markers
                var marker = new google.maps.Marker({
                    position: coordsCurrentLocation,
                    map: map,
                    title: currentLocation,
                    animation: google.maps.Animation.DROP,
                    icon: new google.maps.MarkerImage(
                        "http://chart.googleapis.com/chart?
                            chst=d_bubble_text_small&chld=bb|You|FF8080|000000",
                            null, null, new google.maps.Point(0, 42))
                });
				
                var marker1 = new google.maps.Marker({
                    position: coordsStore1,
                    map: map,
                    title: nameOfStore1,
                    animation: google.maps.Animation.DROP,
                    icon: new google.maps.MarkerImage(
                        "http://chart.googleapis.com/chart?
                        chst=d_bubble_text_small&chld=bb|Best%20Buy|FF8080|000000",
                        null, null, new google.maps.Point(0, 42))
                });
				
                var marker2 = new google.maps.Marker({
                position: coordsStore2,
                    map: map,
                    title: nameOfStore2,
                    animation: google.maps.Animation.DROP,
                    icon: new google.maps.MarkerImage(
                        "http://chart.googleapis.com/chart?
                        chst=d_bubble_text_small&chld=bb|Best%20Buy|FF8080|000000",
                        null, null, new google.maps.Point(0, 42))
                });
				
                var marker3 = new google.maps.Marker({
                    position: coordsStore3,
                    map: map,
                    title: nameOfStore3,
                    animation: google.maps.Animation.DROP,
                    icon: new google.maps.MarkerImage(
                        "http://chart.googleapis.com/chart?
                        chst=d_bubble_text_small&chld=bb|Best%20Buy|FF8080|000000",
                        null, null, new google.maps.Point(0, 42))
                });
				
                // Write to HTML
                document.getElementById("latitude").innerHTML = latitude;
                document.getElementById("longitude").innerHTML = longitude;
				
                document.getElementById("nameOfStore1").innerHTML = nameOfStore1;
                document.getElementById("storeAddress1").innerHTML = storeAddress1;
				
                document.getElementById("nameOfStore2").innerHTML = nameOfStore2;
                document.getElementById("storeAddress2").innerHTML = storeAddress2;
				
                document.getElementById("nameOfStore3").innerHTML = nameOfStore3;
                document.getElementById("storeAddress3").innerHTML = storeAddress3;
				
            });
        }else {
            alert("Geolocation API is not supported in your browser.");
        }
    }
</script>
<style type="text/css">
#mapContainer {
    height: 500px;
    width: 100%;
}
</style>
</head>
<body onload="loadMap();">
    <svg width ="100%" height="100">
        <text x=50% y=75
            font-family="impact"
            font-size="60px"
            fill="996600"
            text-anchor="middle">
        Smart Homes
        </text>
    </svg>
	
    <div align="center">
        <h3>Store Locator</h3>
    </div>
	
    <table>
        <tr>
            <td>Your Current Location: </td>
            <td>Latitude</td>
            <td id="latitude">?</td>
            <td> - </td>
            <td>Longitude</td>
            <td id="longitude">?</td>
        </tr>
    </table>
    <br>
    <table>
        <tr>
            <td>Stores Nearest You Are:</td>
        </tr>
        <tr>
            <td id="nameOfStore1">?</td>
            <td id="storeAddress1">?</td>			
        </tr>
        <tr>
            <td id="nameOfStore2">?</td>
            <td id="storeAddress2">?</td>			
        </tr>
        <tr>
            <td id="nameOfStore3">?</td>
            <td id="storeAddress3">?</td>			
        </tr>
    </table>
	
    <div id="mapContainer"></div>
</body>
</html>