title: Javascript Google Maps API CIRCLES - Show numerical information on mouse over
body: <p>I started using the following google maps example code. It shows a circle hovering on the city, the more population, the bigger the circle. I'd like to be able to show the population not only with the circle but also with the numeric data on mouseover. It would be great. </p>
  
  <p>Can anyone please help me out? </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Circles&lt;/title&gt;
      &lt;style&gt;
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        #map {
          height: 100%;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script&gt;
        // 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: 34.052, lng: -118.243},
            population: 3857799
          },
          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
            });
          }
        }
      &lt;/script&gt;
      &lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;callback=initMap"&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>