Untitled

<!DOCTYPE html>
<html>
	<head>
		<title>Pokemon Heatmap</title>
		<style>
			#map {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script type="text/javascript">
			var pGoStyle=[{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#a1f199"}]},{"featureType":"landscape.natural.landcover","elementType":"geometry.fill","stylers":[{"color":"#37bda2"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry.fill","stylers":[{"color":"#37bda2"}]},{"featureType":"poi.attraction","elementType":"geometry.fill","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","elementType":"geometry.fill","stylers":[{"color":"#e4dfd9"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#37bda2"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#84b09e"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#fafeb8"},{"weight":"1.25"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#5ddad6"}]}];

			function getFile(path, asynch, callback) {
				var xhr = new XMLHttpRequest();
				xhr.overrideMimeType("application/json");
				xhr.open("GET", path, asynch);
				xhr.onload = function (e) {
					if (xhr.readyState === 4) {
						callback(xhr.responseText);
					}
				};
				xhr.onerror = function (e) {
					console.error(xhr.status);
				};
				xhr.send(null);
			}

			var map;
			var infowindow;

			function getSpawnpoints() {
				getFile("spawnpoints.json", true, function(response) {
					"use strict";
					var data = JSON.parse( response );
					for (var i = 0; i < data.length; i++) {
						var p = data[i];
						var spawnPoint = new google.maps.LatLng( p.lat, p.lng );
						var spawnRadiusCircle = new google.maps.Circle({
							strokeColor: '#FF0000',
							strokeOpacity: 0.8,
							strokeWeight: 0,
							fillColor: '#FF0000',
							fillOpacity: 1,
							map: map,
							center: spawnPoint,
							radius: 1000
						});
					}
				});
			}

			function initMap() {
				infowindow = new google.maps.InfoWindow();

				var mapDiv = document.getElementById('map');
				map = new google.maps.Map(mapDiv, {
					center: { lat: 49.26, lng:  -123.03 },
					zoom: 14,
					fullscreenControl: true,
					streetViewControl: false,
					mapTypeControl: true,
					mapTypeControlOptions: {
						style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
						position: google.maps.ControlPosition.LEFT_TOP,
						mapTypeIds: [
							google.maps.MapTypeId.ROADMAP,
							google.maps.MapTypeId.HYBRID,
							'style_pgo'
						]
					},
					mapTypeId: google.maps.MapTypeId.ROADMAP
				});

				var style_pgo = new google.maps.StyledMapType(pGoStyle, {name: "PokemonGo"});
				map.mapTypes.set('style_pgo', style_pgo);
				//map.setMapTypeId('style_pgo');
				getSpawnpoints();


				google.maps.event.addListener(map, "rightclick", function(event) {
					var lat = event.latLng.lat();
					var lng = event.latLng.lng();
					// populate yor box/field with lat, lng
					infowindow.setContent(lat + "," + lng);
					infowindow.setPosition( new google.maps.LatLng( lat, lng ) );
					infowindow.open(map);
				});
				google.maps.event.addListener(map, 'click', function() { infowindow.close(); });
			}
		</script>
		<script type="text/javascript" async defer src="https://maps.googleapis.com/maps/api/js?libraries=visualization&callback=initMap"></script>
	</body>
</html>