Skip to content

Instantly share code, notes, and snippets.

@jdwall

jdwall/gmaps_example.html

Created December 2, 2016 17:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jdwall/afbed34c73e30e09a9b9112e63dd4d87 to your computer and use it in GitHub Desktop.
Save jdwall/afbed34c73e30e09a9b9112e63dd4d87 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gmaps_example.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#legend {
background: #FFF;
padding: 10px;
margin: 5px;
font-size: 12px;
font-family: Arial, sans-serif;
}
.color {
border: 1px solid;
height: 12px;
width: 12px;
margin-right: 3px;
float: left;
}
.live {
background: #40B72A;
}
.top {
background: #FF3333;
}
.secondary {
background: #00AFEC;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="legend">
<h3>Legend</h3>
</div>
<script>
// LatLng and associated color variables for each city.
var citymap = {
atlanta: {
center: {
lat: 33.755456,
lng: -84.39153
},
fillColor: '#40B72A',
strokeColor: '#13370d',
innerFillOpacity: 0.3,
outerFillOpacity: 0.15
},
seattle: {
center: {
lat: 47.614358,
lng: -122.338864
},
fillColor: '#40B72A',
strokeColor: '#13370d',
innerFillOpacity: 0.3,
outerFillOpacity: 0.15
},
boston: {
center: {
lat: 42.360082,
lng: -71.05888
},
fillColor: '#FF3333',
strokeColor: '#fe2855',
innerFillOpacity: 0.25,
outerFillOpacity: 0.125
},
kansascity: {
center: {
lat: 39.099727,
lng: -94.578567
},
fillColor: '#FF3333',
strokeColor: '#fe2855',
innerFillOpacity: 0.25,
outerFillOpacity: 0.125
},
cleveland: {
center: {
lat: 41.49932,
lng: -81.694361
},
fillColor: '#00AFEC',
strokeColor: '#0076a0',
innerFillOpacity: 0.2,
outerFillOpacity: 0.1
},
cincinnati: {
center: {
lat: 39.103118,
lng: -84.51202
},
fillColor: '#00AFEC',
strokeColor: '#0076a0',
innerFillOpacity: 0.2,
outerFillOpacity: 0.1
},
portland: {
center: {
lat: 45.523062,
lng: -122.676482
},
fillColor: '#00AFEC',
strokeColor: '#0076a0',
innerFillOpacity: 0.2,
outerFillOpacity: 0.1
},
lasvegas: {
center: {
lat: 36.169941,
lng: -115.13983
},
fillColor: '#00AFEC',
strokeColor: '#0076a0',
innerFillOpacity: 0.2,
outerFillOpacity: 0.1
},
columbus: {
center: {
lat: 39.961176,
lng: -82.998794
},
fillColor: '#00AFEC',
strokeColor: '#0076a0',
innerFillOpacity: 0.2,
outerFillOpacity: 0.1
},
tampa: {
center: {
lat: 27.950575,
lng: -82.457178
},
fillColor: '#00AFEC',
strokeColor: '#0076a0',
innerFillOpacity: 0.2,
outerFillOpacity: 0.1
},
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 37.090, lng: -95.712},
styles: [{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#444444"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"color": "#f2f2f2"
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"saturation": -100
}, {
"lightness": 45
}]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"color": "#46bcec"
}, {
"visibility": "on"
}]
}]
//mapTypeId: 'terrain'
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add 100 Mile Radius Circle to Map.
var popType = new google.maps.Circle({
strokeColor: citymap[city].stroke,
strokeOpacity: 0.3,
strokeWeight: 1,
fillColor: citymap[city].fillColor,
fillOpacity: citymap[city].innerFillOpacity,
//fillOpacity: 0.20,
map: map,
center: citymap[city].center,
radius: 160934 //Math.sqrt(citymap[city].population) * 100
});
// Add 300 Mile Radius Circle to Map.
var cityCircle = new google.maps.Circle({
strokeColor: citymap[city].strokeColor,
strokeOpacity: 0.15,
strokeWeight: 1,
fillColor: citymap[city].fillColor,
fillOpacity: citymap[city].outerFillOpacity,
//fillOpacity: 0.1,
map: map,
center: citymap[city].center,
radius: 482803 //Math.sqrt(citymap[city].population) * 100
});
}
// Create the legend and display on the map
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3>Example Legend</h3>');
content.push('<p><div class="color live"></div>1</p>');
content.push('<p><div class="color top"></div>2</p>');
content.push('<p><div class="color secondary"></div>3</p>');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=KEYREMOVED&callback=initMap"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment