Datacom - Google Map

by gavinfoley

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>	
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

<div class="map-container clear-fix">
    <div id="directions"></div>    
    <div id="map_canvas"></div>
</div>

CSS

/* Custom styles Datacom */

.infobox-wrapper {
	display: none;
}

.infobox-label {
	font-family: Verdana;
	font-size: 12px;
	color: #000000;
	cursor: pointer !important;
}

.infobox {
	opacity: 0.60;
	width: 155px;
	border: 2px solid black;
	margin-top: 8px;
	background: #333;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: .5em 1em;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	text-shadow: 0 -1px #000000;
	-webkit-box-shadow: 0 0 8px #000;
	box-shadow: 0 0 8px #000;
}

	.infobox h3 {
		color: white;
		font-size: 14px;
		font-weight: bold;
		margin: 0 0 5px 0;
	}

	.infobox a {
		color: white;
	}

		.infobox a:hover {
			color: #333;
		}

	.infobox p {
		margin: 0 0 3px 0;
		font-size: 11px;
	}

.map-container {
}

#directions {
	display: none;
	font-size: 10px;
	height: 412px;
	width: 300px;
	float: left;
	background-color: white;
	overflow: auto;
	padding: 10px;
}

	#directions #closeDirections {
		float: right;
	}

	#directions img#closeDirections {
		cursor: pointer;
	}

#regions {
	display: none;
	height: 200px;
	width: 300px;
	float: left;
	background-color: white;
	overflow: auto;
	padding: 10px;
}

#map_canvas {
	height: 432px;
	width: 100%;
	float: right;
}

JavaScript

MapCoordinates = function (lat, lng) {
        this.lat = lat;
        this.lng = lng;
        this.setLatLng = function (newLat, newLng) {
            this.lat = newLat;
            this.lng = newLng;
        };
    };

    // Location finder module
    // Use HTML5 Geolocation to find current users location
    var locationFinder = function (fallbackLat, fallbackLng) {

        function userLocationNotFound() {
            latlng.lat = fallbackLat; //-41.278466
            latlng.lng = fallbackLng; //174.777011
            console.log("User Location NOT found. Set to fallback: " + latlng.lat + ", " + latlng.lng);
        }

        this.latlng = {
            lat: null,
            lng: null
        };

        // Returns current user geolocation or a default location it geolocation cant be found
        this.initFindUserLocation = function () {
            this.initFindUserLocationAsync();
        };

        // Async method to return current user geolocation or a default location it geolocation cant be found
        // The passed jQuery deferred object is marked at resolved once location has been found
        this.initFindUserLocationAsync = function ($deferredObject) {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(

                function (position) {
                    latlng.lat = position.coords.latitude;
                    latlng.lng = position.coords.longitude;
                    // location has been found. So set $deferredObject to resolved so dependant functions can run
                    if ($deferredObject) {
                        $deferredObject.resolve();
                    }
                    console.log("User Location found: " + latlng.lat + ", " + latlng.lng);
                }, userLocationNotFound);
            } else {
                userLocationNotFound();
            }
        };

        this.usersPosition = function () {
            return latlng;
        };

    };

    //...