Info window for multiple google map circles

Question

I need to add info windows for multiple circles. I have tried changing cityCircle to citymap[city] in addListener. I've googled this for six hours now... The code below will pop the window at top left of the map with nothing in it, not over circle. Thanks in advance for any help!

echo '<script>
var citymap = {'."\n";
$result = $site->query("SELECT * FROM ZIPCODES WHERE 1");
while ($data = $result->fetch_array())
{
$zip = $data['ZIP'];
$coor = explode(",", $data['COOR']);
$count = $data['COUNT'];
echo $zip . ': {
    center: {lat: ' . $coor[0] . ', lng: ' . $coor[1] . '},
    population: ' . $count . ',
    title: "<div>TEST</div>"
},'."\n";

}
echo '};

function initMap() {
var map = new google.maps.Map(document.getElementById("advisor-map"), {
    zoom: 6,
    center: {lat: 34.730318, lng: -87.823112},
    mapTypeId: "terrain"
});

for (var city in citymap) {
    var cityCircle = new google.maps.Circle({
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map,
        center: citymap[city].center,
        title: citymap[city].title,
        radius: Math.sqrt(citymap[city].population) * 10000
    });

    google.maps.event.addListener(cityCircle, "click", function (e) {
        var infoWindow = new google.maps.InfoWindow();
        infoWindow.setContent(cityCircle.title);
        infoWindow.open(map, cityCircle);
    });
}
}
google.maps.event.addDomListener(window, "load", initialize);
</script>'."\n";

What does your `citymap` look like? Please provide a [mcve] that demonstrates your issue. This is a possible duplicate of [Problems in Creating InfoWindow on each individual circle with mouseover using Google Map API](https://stackoverflow.com/questions/15503848/problems-in-creating-infowindow-on-each-individual-circle-with-mouseover-using-g) or [Google Maps Infowindows with shape](https://stackoverflow.com/questions/30946318/google-maps-infowindows-with-shapes) — geocodezip, Jan 01 '18 at 23:47
duplicate of [Google Maps API - Get info window to open when clicking a circle?](https://stackoverflow.com/questions/29099608/google-maps-api-get-info-window-to-open-when-clicking-a-circle) — geocodezip, Jan 01 '18 at 23:49
geocodezip's link is almost perfect. But how would I get info from each citymap variable? — Randy Bailey, Jan 02 '18 at 13:59
What information do you want to get from the citymap variable? One option would be to add it to the circle as a property, then get it with `this.propertyname`. (in your code use `this.title` in the InfoWindow content) — geocodezip, Jan 02 '18 at 14:12

geocodezip · Answer 1 · 2020-04-17T17:04:33.320

Create an infowindow: var infowindow = new google.maps.InfoWindow();
set its content, position and open it on a click:

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(cityCircle, "click", function(e) {
  infoWindow.setContent(this.title);
  infoWindow.setPosition(this.getCenter());
  infoWindow.open(map);
});

proof of concept fiddle

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById("advisor-map"), {
    zoom: 6,
    center: {
      lat: 55,
      lng: 0
    },
    mapTypeId: "terrain"
  });

  for (var city in citymap) {
    var cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      title: city, // citymap[city].title,
      radius: Math.sqrt(citymap[city].population) * 100
    });

    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(cityCircle, "click", function(e) {

      infoWindow.setContent(this.title);
      infoWindow.setPosition(this.getCenter());
      infoWindow.open(map);
    });
  }
}
google.maps.event.addDomListener(window, "load", initMap);
var citymap = {};
citymap['Mumbai'] = {
  center: new google.maps.LatLng(19.075787, 72.8774882),
  population: 14000
};
citymap['Cardiff'] = {
  center: new google.maps.LatLng(51.4887969, -3.1826222),
  population: 1000
};
citymap['Pune'] = {
  center: new google.maps.LatLng(18.5212252, 73.8556156),
  population: 14000
};
citymap['Beeston'] = {
  center: new google.maps.LatLng(52.9547839, -1.1581733),
  population: 3000
};
citymap['Birmingham'] = {
  center: new google.maps.LatLng(52.4677785, -1.7230922),
  population: 4000
};
citymap['Bristol'] = {
  center: new google.maps.LatLng(51.5434779, -2.573748),
  population: 2000
};
citymap['Brussels'] = {
  center: new google.maps.LatLng(50.8891268, 4.4592719),
  population: 1000
};
citymap['Crewe'] = {
  center: new google.maps.LatLng(53.0888925, -2.4357559),
  population: 2000
};
citymap['Dundee'] = {
  center: new google.maps.LatLng(56.4563534, -2.9752489),
  population: 1000
};
citymap['Durham'] = {
  center: new google.maps.LatLng(54.5468172, -1.5703596),
  population: 1000
};
citymap['Glasgow'] = {
  center: new google.maps.LatLng(55.8601948, -4.256542),
  population: 2000
};
citymap['Liverpool'] = {
  center: new google.maps.LatLng(53.4114691, -2.9954281),
  population: 5000
};
citymap['Livingston'] = {
  center: new google.maps.LatLng(55.8889266, -3.5575676),
  population: 12000
};
citymap['Moray'] = {
  center: new google.maps.LatLng(57.6153854, -3.5727702),
  population: 1000
};
citymap['Newcastle'] = {
  center: new google.maps.LatLng(55.0114826, -1.6218245),
  population: 1000
};
citymap['Runcorn'] = {
  center: new google.maps.LatLng(53.3416269, -2.7312661),
  population: 6000
};
citymap['Winnersh'] = {
  center: new google.maps.LatLng(51.43674, -0.89131),
  population: 5000
};
citymap['Wolverhampton'] = {
  center: new google.maps.LatLng(52.6375302, -2.1184067),
  population: 1000
};
citymap['Plymouth'] = {
  center: new google.maps.LatLng(50.3752499, -4.1425974),
  population: 1000
};
citymap['Swinton Manch'] = {
  center: new google.maps.LatLng(53.5108841, -2.3468262),
  population: 1000
};
citymap['Cleveleys'] = {
  center: new google.maps.LatLng(53.8758639, -3.0423774),
  population: 1000
};
citymap['Peterborough'] = {
  center: new google.maps.LatLng(52.5694182, -0.2415024),
  population: 1000
};
citymap['Saffron Walden'] = {
  center: new google.maps.LatLng(52.0224437, 0.2393275),
  population: 1000
};
citymap['Gloucester'] = {
  center: new google.maps.LatLng(51.864033, -2.2382369),
  population: 1000
};
citymap['LTQ'] = {
  center: new google.maps.LatLng(51.5250213, -0.141524),
  population: 18000
};
citymap['Enfield'] = {
  center: new google.maps.LatLng(51.651765, -0.0835785),
  population: 1000
};

html,
body,
#advisor-map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="advisor-map"></div>

score 1 · Answer 2 · answered Jan 03 '18 at 00:20

This is what I was looking for. Map also auto centers and zooms. Hope this helps someone!

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
    var citymap = {};
    citymap["38119"] = {
          center: new google.maps.LatLng(35.0772572, -89.84582),
          zipcode: "38119",
          population: "29",
          advisors: "advisors"
        };
    citymap["37909"] = {
          center: new google.maps.LatLng(35.9467011, -84.0326033),
          zipcode: "37909",
          population: "9",
          advisors: "advisors"
        };
    citymap["38655"] = {
          center: new google.maps.LatLng(34.2853188, -89.436391),
          zipcode: "38655",
          population: "2",
          advisors: "advisors"
        };
    citymap["37027"] = {
          center: new google.maps.LatLng(35.9805462, -86.761749),
          zipcode: "37027",
          population: "16",
          advisors: "advisors"
        };
    citymap["42104"] = {
          center: new google.maps.LatLng(36.88064, -86.4794359),
          zipcode: "42104",
          population: "2",
          advisors: "advisors"
        };
    citymap["38804"] = {
          center: new google.maps.LatLng(34.2684438, -88.6819958),
          zipcode: "38804",
          population: "8",
          advisors: "advisors"
        };
    citymap["37204"] = {
          center: new google.maps.LatLng(36.1003494, -86.7718017),
          zipcode: "37204",
          population: "2",
          advisors: "advisors"
        };
    citymap["37421"] = {
          center: new google.maps.LatLng(35.041539, -85.1583064),
          zipcode: "37421",
          population: "9",
          advisors: "advisors"
        };
    citymap["39157"] = {
          center: new google.maps.LatLng(32.4352998, -90.1588618),
          zipcode: "39157",
          population: "4",
          advisors: "advisors"
        };
    citymap["37075"] = {
          center: new google.maps.LatLng(36.3233083, -86.6006249),
          zipcode: "37075",
          population: "1",
          advisors: "advisor"
        };
    citymap["38305"] = {
          center: new google.maps.LatLng(35.6684779, -88.7301525),
          zipcode: "38305",
          population: "1",
          advisors: "advisor"
        };
    citymap["37738"] = {
          center: new google.maps.LatLng(35.6944147, -83.4643551),
          zipcode: "37738",
          population: "1",
          advisors: "advisor"
        };
    citymap["39501"] = {
          center: new google.maps.LatLng(30.3981324, -89.1038783),
          zipcode: "39501",
          population: "1",
          advisors: "advisor"
        };
    citymap["72205"] = {
          center: new google.maps.LatLng(34.7486563, -92.3542193),
          zipcode: "72205",
          population: "1",
          advisors: "advisor"
        };
    citymap["39402"] = {
          center: new google.maps.LatLng(31.3299729, -89.4174641),
          zipcode: "39402",
          population: "1",
          advisors: "advisor"
        };
    citymap["38835"] = {
          center: new google.maps.LatLng(34.93, -88.52),
          zipcode: "38835",
          population: "1",
          advisors: "advisor"
        };
    citymap["37919"] = {
          center: new google.maps.LatLng(35.9073934, -84.0061661),
          zipcode: "37919",
          population: "1",
          advisors: "advisor"
        };
    citymap["38120"] = {
          center: new google.maps.LatLng(35.1212908, -89.8551818),
          zipcode: "38120",
          population: "1",
          advisors: "advisor"
        };
    citymap["38834"] = {
          center: new google.maps.LatLng(34.8984684, -88.5951751),
          zipcode: "38834",
          population: "1",
          advisors: "advisor"
        };

    var cityCircle;
    var infowindow = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();

    function initialize() {
        var mapOptions = {
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

        for (var city in citymap) {
            var populationOptions = {
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: citymap[city].center,
                radius: Math.sqrt(citymap[city].population) * 10000,
                title: citymap[city].population,
                advisor: citymap[city].advisors,
                zipcode: citymap[city].zipcode
            };

            bounds.extend(populationOptions.center);

            cityCircle = new google.maps.Circle(populationOptions);
            cityCircle.title = populationOptions.title;
            cityCircle.advisor = populationOptions.advisor;
            cityCircle.zipcode = populationOptions.zipcode;

            map.fitBounds(bounds);

            google.maps.event.addListener(cityCircle, 'click', function(e) {
                infowindow.setContent("<h3 class='mt20 mb0'>" + this.title + " " + this.advisor + " available</h3><a class='mb30' href='/advisors/find/showme/" + this.zipcode + "/'>Show Me!</a>");
                infowindow.setPosition(this.getCenter());
                infowindow.open(map);
            });
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Info window for multiple google map circles

2 Answers2