Frankie Frankie Frankie Frankie - 11 months ago 74
jQuery Question

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>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
html, body {
height: 100%;
margin: 0;
padding: 0;
#map {
height: 100%;
<div id="map"></div>
// 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 async defer

Answer Source

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){


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

JS fiddle: