louh/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<title>Simple Map</title>
		<meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
		<meta charset='utf-8'>
		<style>
			html, body, #map {
				margin: 0;
				padding: 0;
				height: 100%;
			}
			#debug {
				position: fixed;
				width: 240px;
				max-height: 140px;
				overflow-y: auto;
				overflow-x: hidden;
				background-color: white;
				padding: 20px;
				z-index: 4000;
				right: 6px;
				top: 30px;
				box-shadow: 0 0 3px rgba(0,0,0,0.5);
				border-radius: 2px;
				font-family: 'Courier New', monospace;
				white-space: nowrap;
			}
			#messages {
				font-size: 12px;
			}
		</style>
		<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
	</head>
	<body>

		<div id='debug'>
			<strong>Output</strong>
			<br>
			<div id='messages'>
			</div>
		</div>

		<div id='map'></div>

		<script src='map.js'></script>
	</body>
</html>

## map.js
"use strict";

var map,
	markers = [],
	infowindow;

var styles = [
	{
		stylers: [
//			{ hue: "#4a8bc9" },
//			{ saturation: -75 }
		]
	},{
		featureType: 'road',
		elementType: 'labels',
		stylers: [
			{ visibility: 'on' }
		]
	},{
		featureType: 'landscape.man_made',
		elementType: 'geometry.fill',
		stylers: [
		//	{ color: '#e8e8ec' }
		// saturation / lightness used instead of color because it retains transparency/shadows on 3D buildings
			{ saturation: -100 },
			{ lightness: 30 }
		]
	},{
		featureType: 'landscape.man_made',
		elementType: 'geometry.stroke',
		stylers: [
			{ visibility: 'on' },
			{ color: '#a1a1a1' }
		]
	},{
		featureType: 'road',
		elementType: 'geometry.stroke',
		stylers: [
			{ color: '#c1c1c1' },
			{ weight: 1 }
		]
	},{
		featureType: 'road.local',
		elementType: 'geometry.fill',
		// saturation / lightness used instead of color because it retains transparency on satellite layer
		stylers: [
			{ saturation: -100 },
			{ lightness: 0 }
		]
	},{
		featureType: 'road.highway',
		elementType: 'geometry.fill',
		stylers: [
			{ saturation: -100 },
			{ lightness: 100 }
    	]
	},{
		featureType: 'road.highway',
		elementType: 'labels.text.fill',
		stylers: [
			{ visibility: 'on' },
			{ color: '#606060' }
		]
	},{
		featureType: 'administrative.neighborhood',
		elementType: 'labels.text.fill',
		stylers: [
			{ visibility: 'on' },
			{ color: '#808080' }
		]
	},{
		featureType: 'poi',
		elementType: 'labels',
		stylers: [
			{ visibility: 'off' }
		]
	},{
		featureType: 'poi.business',
		elementType: 'labels',
		stylers: [
			{ visibility: 'off' }
		]
	},{
		featureType: 'poi.business',
		elementType: 'geometry.fill',
		stylers: [
			{ color: '#d8d8da' }
		]
	},{
		featureType: 'poi.government',
		elementType: 'geometry.fill',
		stylers: [
			{ color: '#d8d8da' }
		]
	},{
		featureType: 'poi.medical',
		elementType: 'geometry.fill',
		stylers: [
			{ color: '#d8d8da' }
		]
	},{
		featureType: 'poi.place_of_worship',
		elementType: 'geometry.fill',
		stylers: [
			{ color: '#d8d8da' }
		]
	},{
		featureType: 'poi.school',
		elementType: 'geometry.fill',
		stylers: [
			{ color: '#d8d8da' }
		]
	},{
		featureType: 'poi.sports_complex',
		elementType: 'geometry.fill',
		stylers: [
			{ color: '#d8d8da' }
		]
	},{
		featureType: '',
		elementType: '',
		stylers: [
			{ property: '' }
		]
	}
];

function initialize() {
	var mapOptions = {
		zoom: 15,
		minZoom: 11,
		maxZoom: 19,
		center: new google.maps.LatLng(36.164, -115.144),
		background: '#eeeeee',
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		streetViewControl: false,
		styles: styles,
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.LARGE
		}
	};

	map = new google.maps.Map(document.getElementById('map'),
		mapOptions);

	// Create infowindow instance
	infowindow = new google.maps.InfoWindow({
		content: 'This is content that needs to be shown',
		position: map.getCenter()
	})

	google.maps.event.addListener(map, 'click', function (e) {
//		_output('Bounds: ' + map.getBounds())
		_output('Clicked: ' + e.latLng.toUrlValue())

		_deleteMarkers()
		var marker = _addMarker(e.latLng)

		map.panTo(e.latLng)
		infowindow.open(map, marker)

	})
}

google.maps.event.addDomListener(window, 'load', initialize);

function _output (string) {
	var output = document.getElementById('messages')
	var debug = document.getElementById('debug')
	output.innerText += '\n' + string
	debug.scrollTop = debug.scrollHeight
}

function _addMarker (latlng) {
	// Create marker instance
	var marker = new google.maps.Marker({
		position: latlng,
		map: map
	})

	// Have to manually keep track of them
	markers.push(marker)

	return marker
}

// Deletes all markers in the array by removing references to them
function _deleteMarkers () {
	if (markers) {
		for (var i in markers) {
			markers[i].setMap(null)
		}
		markers.length = 0
	}
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Map</title>
	<meta name='viewport' content='initial-scale=1.0, user-scalable=no'>
	<meta charset='utf-8'>
	<style>
	html, body, #map {
	margin: 0;
	padding: 0;
	height: 100%;
	}
	#debug {
	position: fixed;
	width: 240px;
	max-height: 140px;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: white;
	padding: 20px;
	z-index: 4000;
	right: 6px;
	top: 30px;
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
	border-radius: 2px;
	font-family: 'Courier New', monospace;
	white-space: nowrap;
	}
	#messages {
	font-size: 12px;
	}
	</style>
	<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
	</head>
	<body>

	<div id='debug'>
	<strong>Output</strong>
	<br>
	<div id='messages'>
	</div>
	</div>

	<div id='map'></div>

	<script src='map.js'></script>
	</body>
	</html>
	"use strict";

	var map,
	markers = [],
	infowindow;

	var styles = [
	{
	stylers: [
	// { hue: "#4a8bc9" },
	// { saturation: -75 }
	]
	},{
	featureType: 'road',
	elementType: 'labels',
	stylers: [
	{ visibility: 'on' }
	]
	},{
	featureType: 'landscape.man_made',
	elementType: 'geometry.fill',
	stylers: [
	// { color: '#e8e8ec' }
	// saturation / lightness used instead of color because it retains transparency/shadows on 3D buildings
	{ saturation: -100 },
	{ lightness: 30 }
	]
	},{
	featureType: 'landscape.man_made',
	elementType: 'geometry.stroke',
	stylers: [
	{ visibility: 'on' },
	{ color: '#a1a1a1' }
	]
	},{
	featureType: 'road',
	elementType: 'geometry.stroke',
	stylers: [
	{ color: '#c1c1c1' },
	{ weight: 1 }
	]
	},{
	featureType: 'road.local',
	elementType: 'geometry.fill',
	// saturation / lightness used instead of color because it retains transparency on satellite layer
	stylers: [
	{ saturation: -100 },
	{ lightness: 0 }
	]
	},{
	featureType: 'road.highway',
	elementType: 'geometry.fill',
	stylers: [
	{ saturation: -100 },
	{ lightness: 100 }
	]
	},{
	featureType: 'road.highway',
	elementType: 'labels.text.fill',
	stylers: [
	{ visibility: 'on' },
	{ color: '#606060' }
	]
	},{
	featureType: 'administrative.neighborhood',
	elementType: 'labels.text.fill',
	stylers: [
	{ visibility: 'on' },
	{ color: '#808080' }
	]
	},{
	featureType: 'poi',
	elementType: 'labels',
	stylers: [
	{ visibility: 'off' }
	]
	},{
	featureType: 'poi.business',
	elementType: 'labels',
	stylers: [
	{ visibility: 'off' }
	]
	},{
	featureType: 'poi.business',
	elementType: 'geometry.fill',
	stylers: [
	{ color: '#d8d8da' }
	]
	},{
	featureType: 'poi.government',
	elementType: 'geometry.fill',
	stylers: [
	{ color: '#d8d8da' }
	]
	},{
	featureType: 'poi.medical',
	elementType: 'geometry.fill',
	stylers: [
	{ color: '#d8d8da' }
	]
	},{
	featureType: 'poi.place_of_worship',
	elementType: 'geometry.fill',
	stylers: [
	{ color: '#d8d8da' }
	]
	},{
	featureType: 'poi.school',
	elementType: 'geometry.fill',
	stylers: [
	{ color: '#d8d8da' }
	]
	},{
	featureType: 'poi.sports_complex',
	elementType: 'geometry.fill',
	stylers: [
	{ color: '#d8d8da' }
	]
	},{
	featureType: '',
	elementType: '',
	stylers: [
	{ property: '' }
	]
	}
	];

	function initialize() {
	var mapOptions = {
	zoom: 15,
	minZoom: 11,
	maxZoom: 19,
	center: new google.maps.LatLng(36.164, -115.144),
	background: '#eeeeee',
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	streetViewControl: false,
	styles: styles,
	zoomControlOptions: {
	style: google.maps.ZoomControlStyle.LARGE
	}
	};

	map = new google.maps.Map(document.getElementById('map'),
	mapOptions);

	// Create infowindow instance
	infowindow = new google.maps.InfoWindow({
	content: 'This is content that needs to be shown',
	position: map.getCenter()
	})

	google.maps.event.addListener(map, 'click', function (e) {
	// _output('Bounds: ' + map.getBounds())
	_output('Clicked: ' + e.latLng.toUrlValue())

	_deleteMarkers()
	var marker = _addMarker(e.latLng)

	map.panTo(e.latLng)
	infowindow.open(map, marker)

	})
	}

	google.maps.event.addDomListener(window, 'load', initialize);

	function _output (string) {
	var output = document.getElementById('messages')
	var debug = document.getElementById('debug')
	output.innerText += '\n' + string
	debug.scrollTop = debug.scrollHeight
	}

	function _addMarker (latlng) {
	// Create marker instance
	var marker = new google.maps.Marker({
	position: latlng,
	map: map
	})

	// Have to manually keep track of them
	markers.push(marker)

	return marker
	}

	// Deletes all markers in the array by removing references to them
	function _deleteMarkers () {
	if (markers) {
	for (var i in markers) {
	markers[i].setMap(null)
	}
	markers.length = 0
	}
	}