bingeboy/Geolocation Javascript

## Geolocation Javascript
var success = function(locationData){
  console.log("locationData object", locationData);
},
error = function(err){
  console.log(err);
};

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error, 10000);
} else {
  error('not supported');
}

## Geolocation running with google maps
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Grateful WebBase</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!--CDN -->
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

    <!--head script-->
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
</head>
<body>
    <h1>Grateful WebBase</h1>
    <div id="map-canvas"></div>
    <!--let browser UI thread complete the run JS-->
    <script serc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map-canvas { height: 100% }
    </style>
    <script type="text/javascript">

        var geocoder;

        function initialize(locationReceived) {

            //Init geolocation
            var myLatlng = new google.maps.LatLng(locationReceived.coords.latitude, locationReceived.coords.longitude);

            //init geocoder
            geocoder = new google.maps.Geocoder();

            console.log(locationReceived);

            var mapOptions = {
                center: myLatlng,
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.SATELLITE

            };

            var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
            map.setTilt(45);

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Hello World!'
            });
        }


        var success = function(locationData){
                    console.log("locationData object", locationData);
                    google.maps.event.addDomListener(window, 'load', initialize(locationData));
                },
                error = function(err){
                    console.log(err);
                };

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success, error, 10000);
        } else {
            error('not supported');
        }


        function codeAddress() {
            var address = "King's Beach Bowl";
            geocoder.geocode( { 'address': address}, function(results, status) {
                console.log(address);
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }
        codeAddress();

    </script>
</body>
</html>

## markers loop
/*
 * Google Maps Marker
 */

//reminder to init the showMarkers function.
var googleProcessedMarkerArray;

showMarkers: function (markers) {

	for (var i in markers){

			marker = new google.maps.Marker({
				map: XXXXXXXXXXXX,
				position: XXXXXXXXXXXX,
				mapTypeControlOptions: {
					style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
				},
				zoomControl: false,
				zoomControlOptions: {
					style: google.maps.ZoomControlStyle.SMALL
				}
			});

		googleProcessedMarkerArray.push(marker);

		locationDetailsWindow = new LocatorInfoBox({
			map: XXXXXXXXXXXX,
			markerID: XXXXXXXXXXXX,
			latlng: XXXXXXXXXXXX,
		});

		/*
		*	Map Events To Marker
		*/
        google.maps.event.addListener(marker, "click", function() {
			console.log("clicked");
        });

	}
}
	var success = function(locationData){
	console.log("locationData object", locationData);
	},
	error = function(err){
	console.log(err);
	};

	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(success, error, 10000);
	} else {
	error('not supported');
	}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Grateful WebBase</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">

	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

	<!--CDN -->
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

	<!--head script-->
	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?sensor=false">
	</script>
	</head>
	<body>
	<h1>Grateful WebBase</h1>
	<div id="map-canvas"></div>
	<!--let browser UI thread complete the run JS-->
	<script serc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map-canvas { height: 100% }
	</style>
	<script type="text/javascript">

	var geocoder;

	function initialize(locationReceived) {

	//Init geolocation
	var myLatlng = new google.maps.LatLng(locationReceived.coords.latitude, locationReceived.coords.longitude);

	//init geocoder
	geocoder = new google.maps.Geocoder();

	console.log(locationReceived);

	var mapOptions = {
	center: myLatlng,
	zoom: 18,
	mapTypeId: google.maps.MapTypeId.SATELLITE

	};

	var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
	map.setTilt(45);

	var marker = new google.maps.Marker({
	position: myLatlng,
	map: map,
	title: 'Hello World!'
	});
	}


	var success = function(locationData){
	console.log("locationData object", locationData);
	google.maps.event.addDomListener(window, 'load', initialize(locationData));
	},
	error = function(err){
	console.log(err);
	};

	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(success, error, 10000);
	} else {
	error('not supported');
	}


	function codeAddress() {
	var address = "King's Beach Bowl";
	geocoder.geocode( { 'address': address}, function(results, status) {
	console.log(address);
	if (status == google.maps.GeocoderStatus.OK) {
	map.setCenter(results[0].geometry.location);
	var marker = new google.maps.Marker({
	map: map,
	position: results[0].geometry.location
	});
	} else {
	alert('Geocode was not successful for the following reason: ' + status);
	}
	});
	}
	codeAddress();

	</script>
	</body>
	</html>
	/*
	* Google Maps Marker
	*/

	//reminder to init the showMarkers function.
	var googleProcessedMarkerArray;

	showMarkers: function (markers) {

	for (var i in markers){

	marker = new google.maps.Marker({
	map: XXXXXXXXXXXX,
	position: XXXXXXXXXXXX,
	mapTypeControlOptions: {
	style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
	},
	zoomControl: false,
	zoomControlOptions: {
	style: google.maps.ZoomControlStyle.SMALL
	}
	});

	googleProcessedMarkerArray.push(marker);

	locationDetailsWindow = new LocatorInfoBox({
	map: XXXXXXXXXXXX,
	markerID: XXXXXXXXXXXX,
	latlng: XXXXXXXXXXXX,
	});

	/*
	* Map Events To Marker
	*/
	google.maps.event.addListener(marker, "click", function() {
	console.log("clicked");
	});

	}
	}