CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Frankie Frankie
Frankie Frankie

Reputation: 45

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

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>

Upvotes: 0

Views: 670

Answers (1)

Ivan Jovović
Ivan Jovović

Reputation: 5298

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/

Upvotes: 1

Related Questions