CODEWITHSUNDEEP
google-maps-api-3google-maps-markers
Eddie
Eddie

Reputation: 43

Show radius when click on marker

I want to click on the google marker which will show the google circle (radius). Not sure if the placement of addListener is wrong or am I missing some stuff.

    coordinates = [
        ['Tan Tock Seng Hospital', {lat: 1.3213762, lng: 103.8457089}],
        ['Singapore General Hospital', {lat: 1.279421747, lng: 103.8345482}],
        ['Changi General Hospital', {lat: 1.340825885, lng: 103.9494655}],
        ['Khoo Teck Puat Hospital', {lat: 1.424081019, lng: 103.838578}],
        ['Ng Teng Fong General Hospital', {lat: 1.333463114, lng: 103.7455669}],
        ['National University Hospital', {lat: 1.29442026, lng: 103.7836869}]
    ];

    for (var i = 0; i < coordinates.length; i++) {
        // Google Marker for Hospital Coordinates
        marker = new google.maps.Marker({
            position: coordinates[i][1],
            map: map,
            icon: 'https://maps.google.com/mapfiles/kml/paddle/blu-stars.png',
            title: coordinates[i][0]
        });

        marker_radius = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0,
            map: map,
            center: coordinates[i][1],
            radius: 2000, // in metres
            clickable: false
        });

        marker_radius.setVisible(true); // set circle to invisible
        marker_radius.bindTo('center', marker, 'position'); // binds the circle to marker

        google.maps.event.addListener(marker, 'click', function() {
            marker_radius.setVisible(getVisible() ? false : true);
        });

    }

Upvotes: 1

Views: 106

Answers (1)

MrUpsidown
MrUpsidown

Reputation: 22487

You need to use a closure in your event listener:

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

  return function () {
    marker_radius.setVisible(marker_radius.getVisible() ? false : true);
  }

})(marker, marker_radius));

Read here for more information.

Also your Javascript console should tell you that getVisible() is not defined. So you need to change it to marker_radius.getVisible().

Upvotes: 1

Related Questions