Circles

by nimishgoel056

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Info Windows</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

/* 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;
}

JavaScript

const citymap = {
  Ontario: {
    center: { lat: 51.253, lng: -85.329 },
    population: 2714856,
  },
  Quebec : {
    center: { lat: 46.813878, lng: -71.207981 },
    population: 8405837,
  },
  Winnipeg: {
    center: { lat: 49.895136, lng: -97.138374 },
    population: 3857799,
  },
  Alberta: {
    center: { lat: 53.933271, lng: -116.576503 },
    population: 603502,
  }, 
  British_Columbia: {
    center: { lat: 53.726668, lng: -127.64762 },
    population: 603502,
  },
};

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
  });
  const geocoder = new google.maps.Geocoder();
  geocoder.geocode({ 
  address: "Manitoba",
  'componentRestrictions': {
            'country': 'CA'
          }
  }, (results, status) => {
    if (status === "OK") {
      map.setCenter(results[0].geometry.location);
     /* new google.maps.Marker({
        map,
        position: results[0].geometry.location,
      });  */
    } else {
      window.alert(
        "Geocode was not successful for the following reason: " + status
      );
    }
  });
   // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.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,
    });
  }
}