fitnr/index.html

## index.html
<html>
	<head>
		<title>map test</title>
		<script></script>
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDa40kHQjrMVADweLvXIVaJUjXOUraG164"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="styled-map.js" type="text/javascript"></script>

	</head>
	<body>
		<h3>hello world</h3>
		<p>web content.</p>
		<div id="map-canvas" class="map"></div>

		<!--
			put the script reight before the </body> tag so that it runs after the maps API and JQuery are loaded.
			Other ways to do this, e.g. with async
		 -->
		<script type="text/javascript">
			jQuery(document).ready(function($){
				// Initialize the map once everything is loaded
				initialize_map();

		  		// The ID here must match what we see at the line "new google.maps.Map"
				$("#map-canvas")
					.css("overflow","hidden")
					.prepend("<div class='javo_somw_bg'></div><div class='javo_somw_loading'><div class='javo_cur'></div></div>");

				/* The rest of the jquery and javascript ... */

			});
		</script>
		<style type="text/css">
			.map {
				height: 600px;
				width: 1000px;
			}
		</style>
	</body>
</html>

## styled-map.js
function initialize_map() {

  var styles = [
    {
      "featureType": "water",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 50
      }]
    }, {
      "featureType": "landscape.man_made",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 92
      }]
    }, {
      "featureType": "road.highway",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 5
      }]
    }, {
      "featureType": "poi",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 13
      }]
    }, {
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": -1
      }]
    }
  ]

  var styledMap = new google.maps.StyledMapType(styles, {
    name: "Styled Map"
  });

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(40.7127, -74.006),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };

  // Set the ID of the element that will get the map.
  // map-canvas has to be the ID of an HTML element
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');

}
	<html>
	<head>
	<title>map test</title>
	<script></script>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDa40kHQjrMVADweLvXIVaJUjXOUraG164"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="styled-map.js" type="text/javascript"></script>

	</head>
	<body>
	<h3>hello world</h3>
	<p>web content.</p>
	<div id="map-canvas" class="map"></div>

	<!--
	put the script reight before the </body> tag so that it runs after the maps API and JQuery are loaded.
	Other ways to do this, e.g. with async
	-->
	<script type="text/javascript">
	jQuery(document).ready(function($){
	// Initialize the map once everything is loaded
	initialize_map();

	// The ID here must match what we see at the line "new google.maps.Map"
	$("#map-canvas")
	.css("overflow","hidden")
	.prepend("<div class='javo_somw_bg'></div><div class='javo_somw_loading'><div class='javo_cur'></div></div>");

	/* The rest of the jquery and javascript ... */

	});
	</script>
	<style type="text/css">
	.map {
	height: 600px;
	width: 1000px;
	}
	</style>
	</body>
	</html>
	function initialize_map() {

	var styles = [
	{
	"featureType": "water",
	"stylers": [{
	"saturation": -100
	}, {
	"lightness": 50
	}]
	}, {
	"featureType": "landscape.man_made",
	"stylers": [{
	"saturation": -100
	}, {
	"lightness": 92
	}]
	}, {
	"featureType": "road.highway",
	"stylers": [{
	"saturation": -100
	}, {
	"lightness": 5
	}]
	}, {
	"featureType": "poi",
	"stylers": [{
	"saturation": -100
	}, {
	"lightness": 13
	}]
	}, {
	"stylers": [{
	"saturation": -100
	}, {
	"lightness": -1
	}]
	}
	]

	var styledMap = new google.maps.StyledMapType(styles, {
	name: "Styled Map"
	});

	// Create a map object, and include the MapTypeId to add
	// to the map type control.
	var mapOptions = {
	zoom: 11,
	center: new google.maps.LatLng(40.7127, -74.006),
	mapTypeControlOptions: {
	mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
	}
	};

	// Set the ID of the element that will get the map.
	// map-canvas has to be the ID of an HTML element
	var map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	//Associate the styled map with the MapTypeId and set it to display.
	map.mapTypes.set('map_style', styledMap);
	map.setMapTypeId('map_style');

	}