louh · September 26, 2013 05:42
diff --git a/index.html b/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>
diff --git a/map.js b/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
	}
	}