Javascript Google Maps API CIRCLES - Show numerical information on mouse over

Question

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.

Can anyone please help me out?

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </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: 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
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Answer 1

You may add handler inside for loop:

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

And then create InfoWindow for each circle:

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();
        });
  }

JS fiddle: https://jsfiddle.net/rh54o4th/1/

Javascript Google Maps API CIRCLES - Show numerical information on mouse over

Question

1 answers

solution1
0 ACCPTED 2016-09-30 14:54:42

Javascript Google Maps API CIRCLES - Show numerical information on mouse over

Question

1 answers

solution1 0 ACCPTED 2016-09-30 14:54:42

solution1
0 ACCPTED 2016-09-30 14:54:42