Map with hover

by jwerre

HTML

<script src="src=&quot;https://maps.googleapis.com/maps/api/js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>


    <div id="map"></div>

CSS

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }

JavaScript

let citymap = {
    chicago: {
      center: {
        lat: 41.878,
        lng: -87.629
      },
      population: 8
    },
    newyork: {
      center: {
        lat: 40.714,
        lng: -74.005
      },
      population: 10
    },
    losangeles: {
      center: {
        lat: 34.052,
        lng: -118.243
      },
      population: 35
    },
    vancouver: {
      center: {
        lat: 49.25,
        lng: -123.1
      },
      population: 2
    }
  };

  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({
        fillColor: "red",
        fillOpacity: 0.2,
        strokeColor: "white",
        strokeWeight: 0.5,
        map: map,
        center: citymap[city].center,
        radius: Math.sqrt(citymap[city].population) * 100000

      });



      handlePopulation(cityCircle, citymap[city].population, map);

    }

  }

  function handlePopulation(cityCircle, popultion, map) {
    var infoWindow = new google.maps.InfoWindow({
      content: popultion.toString(),
      position: cityCircle['center']
    });

    google.maps.event.addListener(cityCircle, 'mouseover', function(ev) {

      infoWindow.open(map);
    });

    google.maps.event.addListener(cityCircle, 'mouseout', function(ev) {
      infoWindow.close();
    });
  }


  function getCircle(magnitude) {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: "red",
      fillOpacity: 0.2,
      scale: Math.pow(2, magnitude) / 2,
      strokeColor: "white",
      strokeWeight: 0.5,
    };
  }


  initMap();