Skip to content

Instantly share code, notes, and snippets.

@milkbread

milkbread/index.html

Created July 2, 2013 06:14
Show Gist options
  • Save milkbread/5907118 to your computer and use it in GitHub Desktop.
Save milkbread/5907118 to your computer and use it in GitHub Desktop.
Download ZIP
HTML: Google API Test
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var DEFAULT_ZOOM = 13;
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
//{ hue: "#ff0000" },
//{ saturation: -100 }
]
},/*{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},*/{
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
stylers : [
{visibility: "off"}
]},
{featureType: "transit",
stylers : [
{visibility: "off"}
]},
{featureType: "water",
stylers : [
{color: "#ffffff"}
]},
{featureType: "poi.park",
elementType: "geometry",
stylers : [
{visibility: "on"},
{color: "#00ff00"}
]},
{featureType: "road",
stylers : [
{color: "#ff0000"}
]},
{featureType: "road.arterial",
stylers : [
{weight: 1}
]},
{featureType: "road.highway",
stylers : [
{weight: 1}
]},
{featureType: "road.local",
stylers : [
{weight: 0.5}
]}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
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: DEFAULT_ZOOM,
minZoom: DEFAULT_ZOOM,
maxZoom: DEFAULT_ZOOM + 2,
center: new google.maps.LatLng(37.774, -122.47),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
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');
}
google.maps.event.addDOMListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment