dev-chiefworks
77 lines
2.2 KiB
HTML
77 lines
2.2 KiB
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;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script>
|
|
// This example creates circles on the map, representing populations in North
|
|
// America.
|
|
|
|
// First, create an object containing LatLng and population for each city.
|
|
var citymap = {
|
|
chicago: {
|
|
center: {lat: 41.878, lng: -87.629},
|
|
population: 2714856
|
|
},
|
|
newyork: {
|
|
center: {lat: 40.714, lng: -74.005},
|
|
population: 8405837
|
|
},
|
|
losangeles: {
|
|
center: {lat: 37.7126152, lng: -122.1754642},
|
|
population: 360000
|
|
},
|
|
vancouver: {
|
|
center: {lat: 49.25, lng: -123.1},
|
|
population: 603502
|
|
}
|
|
};
|
|
|
|
function initMap() {
|
|
// Create the map.
|
|
var map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: 4,
|
|
center: {lat: 37.090, lng: -95.712},
|
|
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 the circle for this city to the map.
|
|
var cityCircle = new google.maps.Circle({
|
|
strokeColor: '#FF0000',
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: '#FF0000',
|
|
fillOpacity: 0.35,
|
|
map: map,
|
|
center: citymap[city].center,
|
|
radius: Math.sqrt(citymap[city].population) * 100
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
<script async defer
|
|
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvjiRTxngOQyBP4zpqFlZuiquc0ROvo9c&callback=initMap">
|
|
</script>
|
|
</body>
|
|
</html>
|