CODEWITHSUNDEEP
javascriptgoogle-mapsinfowindow
Neotrius
Neotrius

Reputation: 11

How to use GoogleMaps InfoWindow() on a google.maps.Circle?

The InfoWindow is not displayed if I use it in a loop.

Here is an example of how to use it with Marker: https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/infowindow-simple

I made similar but with Circle, code below, as you can see, console.log is working, but the Infowindow isn't.

What am I missing?

function initMap() {

    // Map settings, location : Barcelona, Spain
    let map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 41.37, lng: 2.17},
        zoom: 15,
        mapTypeId: 'roadmap',
        zoomControl: true,
        mapTypeControl: false,
        scaleControl: true,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: true
    });

    // Circle distribution data : location, radius, data
    let distribution = {
        target_garden: {
            center: {lat: 41.371400, lng: 2.171942},
            population: 1,
            data: `<div>Text 01</div>`
        },
        target_wtc: {
            center: {lat: 41.373477, lng: 2.177650},
            population: 2,
            data: `<div>Text 02</div>`
        }
    };

    // Display 2 red circles on map
    let target;
    for (target in distribution) {

        let circle = new google.maps.Circle({

            // colors
            strokeColor: '#000',
            strokeOpacity: .2,
            strokeWeight: 3,
            fillColor: '#f00',
            fillOpacity: 0.5,

            // position
            map: map,
            center: distribution[target].center,
            radius: Math.sqrt(distribution[target].population) * 100,

            // settings
            draggable: false,
            editable: false,
            clickable: true

        });

        let infowindow = new google.maps.InfoWindow({
            content: distribution[target].data
        });

        // Event : on click a circle open infowindow
        circle.addListener('click', function () {
            infowindow.open(map, circle);
            console.log('on');
        });

    }

}

I expect a click on the red circle to open an InfoWindow.

Upvotes: 0

Views: 486

Answers (1)

JstnPwll
JstnPwll

Reputation: 8685

The problem isn't the loop, it's that you're trying to anchor the InfoWindow to a Circle. This is from the Maps API documentation:

open([map, anchor])

Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions).

So, you could extend Circle somehow to make sure it has a position property, or you can set the position of InfoWindow explicitly (and not use anchor):

circle.addListener('click', function () {
  infowindow.setPosition(circle.center) 
  infowindow.open(map);
});

Upvotes: 3

Related Questions