mapsam/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Top 50 brunch locations in the Seattle area. Locations from Urban Spoon

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<style>
body {
	margin:0; padding:0;
}
#mymap {
	position: absolute;
	height:500px;
	width:960px;
}
.googft-info-window {
	background-color:rgba(255,255,255,0.8);
}
</style>
</head>
<body>
<div id="mymap"></div>

<script type="text/javascript">

	var map;

	window.onload = function(){

		var mapStyle = [
			{featureType: "all",
			stylers: [
				{saturation: -100 }
				]
			}
		];

		var mapOptions = {
			center: new google.maps.LatLng(47.613801,-122.418648),
			zoom: 11,
			mapTypeControl: true,
			streetViewControl: true,
			panControl: true,
			panControlOptions: {
				position: google.maps.ControlPosition.RIGHT_TOP,
				},
			zoomControl: true,
			zoomControlOptions: {
				style: google.maps.ZoomControlStyle.LARGE,
				position: google.maps.ControlPosition.RIGHT_TOP
			    }
			};

			var greyscaleMapType = new google.maps.StyledMapType(mapStyle,
				{name: "Grayscale"});


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

			map.mapTypes.set('Grayscale', greyscaleMapType);
			map.setMapTypeId('Grayscale');

			var venueLayer = new google.maps.FusionTablesLayer({
				query:{
					select: 'Name',
					from: '1xVplwsGmkMjUzP4pp7EC7ds9p6Zs-mvDmQvNK58'
				},
				});

			venueLayer.setMap(map);


	}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<style>
	body {
	margin:0; padding:0;
	}
	#mymap {
	position: absolute;
	height:500px;
	width:960px;
	}
	.googft-info-window {
	background-color:rgba(255,255,255,0.8);
	}
	</style>
	</head>
	<body>
	<div id="mymap"></div>

	<script type="text/javascript">

	var map;

	window.onload = function(){

	var mapStyle = [
	{featureType: "all",
	stylers: [
	{saturation: -100 }
	]
	}
	];

	var mapOptions = {
	center: new google.maps.LatLng(47.613801,-122.418648),
	zoom: 11,
	mapTypeControl: true,
	streetViewControl: true,
	panControl: true,
	panControlOptions: {
	position: google.maps.ControlPosition.RIGHT_TOP,
	},
	zoomControl: true,
	zoomControlOptions: {
	style: google.maps.ZoomControlStyle.LARGE,
	position: google.maps.ControlPosition.RIGHT_TOP
	}
	};

	var greyscaleMapType = new google.maps.StyledMapType(mapStyle,
	{name: "Grayscale"});


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

	map.mapTypes.set('Grayscale', greyscaleMapType);
	map.setMapTypeId('Grayscale');

	var venueLayer = new google.maps.FusionTablesLayer({
	query:{
	select: 'Name',
	from: '1xVplwsGmkMjUzP4pp7EC7ds9p6Zs-mvDmQvNK58'
	},
	});

	venueLayer.setMap(map);


	}

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