// This example creates circles on the map, representing populations in North// America.// First, create an object containing LatLng and population for each city.interfaceCity{center:google.maps.LatLngLiteral;population:number;}constcitymap:Record<string,City>={chicago:{center:{lat:41.878,lng:-87.629},population:2714856,},newyork:{center:{lat:40.714,lng:-74.005},population:8405837,},losangeles:{center:{lat:34.052,lng:-118.243},population:3857799,},vancouver:{center:{lat:49.25,lng:-123.1},population:603502,},};functioninitMap():void{// Create the map.constmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{zoom:4,center:{lat:37.09,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(constcityincitymap){// Add the circle for this city to the map.constcityCircle=newgoogle.maps.Circle({strokeColor:"#FF0000",strokeOpacity:0.8,strokeWeight:2,fillColor:"#FF0000",fillOpacity:0.35,map,center:citymap[city].center,radius:Math.sqrt(citymap[city].population)*100,});}}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
constcitymap={chicago:{center:{lat:41.878,lng:-87.629},population:2714856,},newyork:{center:{lat:40.714,lng:-74.005},population:8405837,},losangeles:{center:{lat:34.052,lng:-118.243},population:3857799,},vancouver:{center:{lat:49.25,lng:-123.1},population:603502,},};functioninitMap(){// Create the map.constmap=newgoogle.maps.Map(document.getElementById("map"),{zoom:4,center:{lat:37.09,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(constcityincitymap){// Add the circle for this city to the map.constcityCircle=newgoogle.maps.Circle({strokeColor:"#FF0000",strokeOpacity:0.8,strokeWeight:2,fillColor:"#FF0000",fillOpacity:0.35,map,center:citymap[city].center,radius:Math.sqrt(citymap[city].population)*100,});}}window.initMap=initMap;
/** 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;}
<html>
<head>
<title>Circles</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eThis example demonstrates how to create circles on a Google Map to represent populations in North America.\u003c/p\u003e\n"],["\u003cp\u003eCircles are scaled based on city population data using a mathematical formula.\u003c/p\u003e\n"],["\u003cp\u003eThe map is centered on North America and uses a "terrain" map type.\u003c/p\u003e\n"],["\u003cp\u003eThe example uses JavaScript or TypeScript to define city data and create the map and circles with the Google Maps API.\u003c/p\u003e\n"]]],["The example visualizes North American city populations on a map using circles. It defines city data with `LatLng` coordinates and population. A Google Map is initialized, and circles are created for each city, with the circle's radius scaled based on the city's population. The circles have styled appearance such as color, opacity, and weight and the code is provided in TypeScript and JavaScript. HTML and CSS files to display the map are also provided.\n"],null,["This example creates circles on the map, representing populations in North\nAmerica.\n\nRead the [documentation](/maps/documentation/javascript/shapes#circles). \n\nTypeScript \n\n```typescript\n// This example creates circles on the map, representing populations in North\n// America.\n\n// First, create an object containing LatLng and population for each city.\n\ninterface City {\n center: google.maps.LatLngLiteral;\n population: number;\n}\n\nconst citymap: Record\u003cstring, City\u003e = {\n chicago: {\n center: { lat: 41.878, lng: -87.629 },\n population: 2714856,\n },\n newyork: {\n center: { lat: 40.714, lng: -74.005 },\n population: 8405837,\n },\n losangeles: {\n center: { lat: 34.052, lng: -118.243 },\n population: 3857799,\n },\n vancouver: {\n center: { lat: 49.25, lng: -123.1 },\n population: 603502,\n },\n};\n\nfunction initMap(): void {\n // Create the map.\n const map = new google.maps.Map(\n document.getElementById(\"map\") as HTMLElement,\n {\n zoom: 4,\n center: { lat: 37.09, lng: -95.712 },\n mapTypeId: \"terrain\",\n }\n );\n\n // Construct the circle for each value in citymap.\n // Note: We scale the area of the circle based on the population.\n for (const city in citymap) {\n // Add the circle for this city to the map.\n const cityCircle = new google.maps.Circle({\n strokeColor: \"#FF0000\",\n strokeOpacity: 0.8,\n strokeWeight: 2,\n fillColor: \"#FF0000\",\n fillOpacity: 0.35,\n map,\n center: citymap[city].center,\n radius: Math.sqrt(citymap[city].population) * 100,\n });\n }\n}\n\ndeclare global {\n interface Window {\n initMap: () =\u003e void;\n }\n}\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/circle-simple/index.ts#L8-L72\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nconst citymap = {\n chicago: {\n center: { lat: 41.878, lng: -87.629 },\n population: 2714856,\n },\n newyork: {\n center: { lat: 40.714, lng: -74.005 },\n population: 8405837,\n },\n losangeles: {\n center: { lat: 34.052, lng: -118.243 },\n population: 3857799,\n },\n vancouver: {\n center: { lat: 49.25, lng: -123.1 },\n population: 603502,\n },\n};\n\nfunction initMap() {\n // Create the map.\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 4,\n center: { lat: 37.09, lng: -95.712 },\n mapTypeId: \"terrain\",\n });\n\n // Construct the circle for each value in citymap.\n // Note: We scale the area of the circle based on the population.\n for (const city in citymap) {\n // Add the circle for this city to the map.\n const cityCircle = new google.maps.Circle({\n strokeColor: \"#FF0000\",\n strokeOpacity: 0.8,\n strokeWeight: 2,\n fillColor: \"#FF0000\",\n fillOpacity: 0.35,\n map,\n center: citymap[city].center,\n radius: Math.sqrt(citymap[city].population) * 100,\n });\n }\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/circle-simple/docs/index.js#L7-L51\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\nCSS \n\n```css\n/* \n * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\n#map {\n height: 100%;\n}\n\n/* \n * Optional: Makes the sample page fill the window. \n */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\nhttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/circle-simple/docs/style.css#L7-L24\n```\n\nHTML \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eCircles\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\n \u003c!-- \n The `defer` attribute causes the script to execute after the full HTML\n document has been parsed. For non-blocking uses, avoiding race conditions,\n and consistent behavior across browsers, consider loading using Promises. See\n https://developers.google.com/maps/documentation/javascript/load-maps-js-api\n for more information.\n --\u003e\n \u003cscript\n src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly\"\n defer\n \u003e\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/circle-simple/docs/index.html#L8-L30\n```\n\nTry Sample \n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/circle-simple/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-circle-simple&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\nClone Sample\n\n\nGit and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. \n\n git clone -b sample-circle-simple https://github.com/googlemaps/js-samples.git\n cd js-samples\n npm i\n npm start\n\n\nOther samples can be tried by switching to any branch beginning with `sample-`\u003cvar translate=\"no\"\u003eSAMPLE_NAME\u003c/var\u003e. \n\n git checkout sample-\u003cvar translate=\"no\"\u003e\u003cspan class=\"devsite-syntax-nx\"\u003eSAMPLE_NAME\u003c/span\u003e\u003c/var\u003e\n npm i\n npm start"]]
