Skip to content

Instantly share code, notes, and snippets.

Created January 7, 2013 20:15
Show Gist options
  • Select an option

  • Save anonymous/4478013 to your computer and use it in GitHub Desktop.

Select an option

Save anonymous/4478013 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<!--
Replace $YOUR_API_KEY_HERE with a google maps api key
evaluate
staticUrl(map)
in the javascript console to get a link to a static map api call for a
map centered at the current point. -->
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=$YOUR_API_KEY_GOES_HERE&sensor=false">
</script>
<script type="text/javascript">
function staticUrl(map) {
var prefix = "http://maps.googleapis.com/maps/api/staticmap?"
var lat = map.center.lat();
var lng = map.center.lng();
var zoom = map.zoom;
var parts =
["center=" + lat + "," + lng,
"zoom=" + zoom,
"format=png",
"sensor=false",
"size=640x640",
"maptype=roadmap",
"style=visibility:off",
"style=feature:road|visibility:on",
"style=feature:water|visibility:on",
"style=feature:water|element:labels|visibility:off",
"style=feature:road|element:geometry.fill|color:0x754f0d",
"style=feature:water|element:geometry.fill|color:0x000000",
"style=feature:water|element:geometry.stroke|color:0x000000",
"style=feature:road|element:labels|visibility:off",
"style=feature:road|element:geometry.stroke|visibility:off",
"style=feature:landscape|element:geometry|visibility:on",
"style=feature:landscape|element:geometry|color:0xffffff"];
return prefix + parts.join("&");
}
function initialize() {
var mapOptions = {
backgroundColor: 'white',
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var styles = [
{
"stylers": [
{ "visibility": "off" }
]
},
{
"featureType": "road",
"stylers": [
{ "visibility": "on" }
]
},
{
"featureType": "water",
"stylers": [
{ "visibility": "on" }
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#754f0d" }
]
},{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#000000" }
]
},{
"featureType": "water",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#000000" }
]
},{
"featureType": "road",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "off" }
]
}
];
map.setOptions({styles: styles});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment