Google Maps API - custom circle onclick event not firing

Question

I am using Google Maps API and I have implemented custom circle using this SO answer as reference which is working absolutely fine.

Here below is my screenshot what I have done so far.

As you can see above, I am showing my count with Map Icon.

Now I have used infobox as well so when I click on map icon, its opening something like this.

Now the problem which I am facing if I click on my count, its not opening the same infobox which is opening if I click on my icon.

I tried to use below code inside my for loop but its not working for me.

 google.maps.event.addListener(ibLabel, 'click', (function (marker, i) {

                        return function () {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));

Here is my full source code what I have done so far.

 var locations = chartData;
                map = new google.maps.Map(document.getElementById('map-canvas'), {
                    zoom: 4,
                    center: new google.maps.LatLng(-27.4756261, 129.3748879),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                map.setOptions({minZoom: 1, maxZoom: 15});                
                var marker, i;
                var circle;


                var latlng;
                var myLatLng;
                var closeInfoBox = document.getElementById("close-button");


                var infowindow = new google.maps.InfoWindow({maxWidth: 350});
                 var oms = new OverlappingMarkerSpiderfier(map, {
                    //markersWontMove: true, // we promise not to move any markers, allowing optimizations
                 //   markersWontHide: true, // we promise not to change visibility of any markers, allowing optimizations
                  //  basicFormatEvents: true  // allow the library to skip calculating advanced formatting information
                });




                for (i = 0; i < locations.length; i++) {

                    var user_id_array = '<?= $user_id_array; ?>';
                    var image_name = 'ouvar-pin-new.png';
                    var get_user_id = locations[i][4];
                    var fill_color_val = '#154ff6';



                    var latitude = locations[i][1];
                    var lontitude = locations[i][2];

                    myLatLng = google.maps.LatLng(latitude, lontitude);
                    var latlng = new google.maps.LatLng(latitude, lontitude);

                    if (user_id_array != '')
                    {
                        var data = JSON.parse(user_id_array);
                        image_name = data[get_user_id];
                        if(image_name != 'ouvar-pin-new-blue.png'){
                            fill_color_val = '#f24e82';
                        }

                       // alert(image_name);

                    }
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,                     


                    });


                    circle = new google.maps.Circle({
                        map: map,
                        radius: 200000, // 10 miles in metres
                        fillColor: fill_color_val,
                        strokeColor: '#FFFFFF',
                        strokeWeight: 5,
                        fillOpacity: 1,
                    });
                    circle.bindTo('center', marker, 'position');


                    var labelText = locations[i][5];
                    var myOptions = {
                        content: labelText,
                        boxStyle: {
                        border: "none",
                        textAlign: "center",
                        fontSize: "12pt",
                        width: "50px",
                        color:'white',
                        },
                        disableAutoPan: true,
                        pixelOffset: new google.maps.Size(-25,-5),
                        position: latlng,
                        closeBoxURL: "",
                        isHidden: false,
                        pane: "floatPane",
                        enableEventPropagation: true,
                        zIndex: null,
                    };




                    // marker.setVisible(false);

                     var ibLabel = new InfoBox(myOptions);
                        ibLabel.open(map);


                         google.maps.event.addListener(ibLabel, 'click', (function (marker, i) {

                        return function () {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));

                     google.maps.event.addListener(marker, 'click', (function (marker, i) {

                        return function () {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                    google.maps.event.addListener(map, 'click', function () {
                        infowindow.close();
                        marker.open = false;
                    });

                    oms.addMarker(marker);
                      //oms.addMarker(marker);


                }


                  window.map = map;  // for debugging/exploratory use in console
                window.oms = oms;

                google.maps.event.addListener(infowindow, 'domready', function () {

                    var iwOuter = $('.gm-style-iw');

                    var iwBackground = iwOuter.prev();


                    iwBackground.children(':nth-child(2)').css({'display': 'none'});


                    iwBackground.children(':nth-child(4)').css({'display': 'none'});


                    iwBackground.children(':nth-child(1)').attr('style', function (i, s) {
                        return s + 'left: 76px !important;'
                    });




                    iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index': '1'});


                    var iwCloseBtn = iwOuter.next();


                    iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #fff', 'border-radius': '13px', 'padding': '6px', ' box-shadow': '0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2)'});


                    if ($('.iw-content').height() < 140) {
                        $('.iw-bottom-gradient').css({display: 'none'});
                    }


                    iwCloseBtn.mouseout(function () {
                        $(this).css({opacity: '1'});
                    });
                });

Can someone guide me how to enable click event for my custom circle as well.

Answer 1

If you want something to happen when someone clicks on the circle, you need to add a click listener to it. The code below will open the same infowindow on a click of the circle as the click listener on the marker (and reference it to the marker).

google.maps.event.addListener(circle, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
  }
})(marker, i));

proof of concept fiddle

const citymap = {
  chicago: {
    name: "Chicago",
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    name: "New York",
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    name: "Los Angeles",
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    name: "Vancouver",
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap() {
  // Create the map.
  const infowindow = new google.maps.InfoWindow({maxWidth: 350});
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: {
      lat: 37.09,
      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 (const city in citymap) {
    console.log("city:"+citymap[city].name);
    // Add the circle for this city to the map.
    const circle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
    const marker = new google.maps.Marker({
      position: citymap[city].center,
      map: map,
    });
    google.maps.event.addListener(marker, 'click', (function(marker, city) {
      return function() {
        console.log("marker click:"+citymap[city].name);
        infowindow.setContent(citymap[city].name);
        infowindow.open(map, marker);
      }
    })(marker, city));
    google.maps.event.addListener(circle, 'click', (function(marker, city) {
      return function() {
        console.log("circle click:"+citymap[city].name);
        infowindow.setContent(citymap[city].name);
        infowindow.open(map, marker);
      }
    })(marker, city));
  }
}

window.initMap = initMap;

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Circles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  </head>
  <body>
    <div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"
      defer
    ></script>
  </body>
</html>