Home / Questions / 2884
Accepted
Carlos Quiroga
Asked: 2020-01-21 15:48:28 +0800 CST 2020-01-21 15:48:28 +0800 CST

Make the Google Maps circle not affect a click on the map

  • 772

I have a google map where I can put a marker, drag it and with it goes a circle which is the search radius.

My problem is that if I click inside the radius, it doesn't call the event that makes the marker move to the pointer position, since the radius is above it.

What can I do so that the circle is visible but not affected by clicks?

var pos = {
    lat: latitud,
    lng: longitud
};
map = new google.maps.Map(document.getElementById('map'), {
    center: pos,
    zoom: 6
});
marcador = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP
});
marcador.addListener('click', toggleBounce);
centerMarkerMap();
circulo = new google.maps.Circle({
    strokeColor: '#44a373',
    strokeOpacity: 0.5,
    strokeWeight: 1,
    fillColor: '#44a373',
    fillOpacity: 0.25,
    map: map
});
circulo.setRadius(parseInt(inpRadius.value) * 1000);
circulo.bindTo('center', marcador, 'position');

//Evento del mapa que crea los marcadores al hacer click    
google.maps.event.addListener(map, 'click', function (event) {
    marcador.setMap(null);
    circulo.setMap(null);
    marcador = new google.maps.Marker({
        map: map,
        draggable: true,
        position: event.latLng,
        animation: google.maps.Animation.DROP
    });
    marcador.addListener('click', toggleBounce);
    estandarizarPos(event.latLng);
    google.maps.event.addListener(marcador, 'dragend', function () {
        estandarizarPos(marcador.getPosition());
    });
    circulo = new google.maps.Circle({
        strokeColor: '#44a373',
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: '#44a373',
        fillOpacity: 0.25,
        map: map
    });
    circulo.setRadius(parseInt(inpRadius.value) * 1000);
    circulo.bindTo('center', marcador, 'position');
});
google.maps.event.addListener(marcador, 'dragend', function () {
    estandarizarPos(marcador.getPosition());
});
javascript

1 Answers

  1. Best Answer

    A possible solution is not to prevent the circle from being affected by the clicks, but quite the opposite: to listen for the clicks and execute an action when they occur (specifically the same action that would occur when clicking on another point on the map).

    This can be achieved in two simple steps:

    • Take the anonymous function out of clickthe map's event handler and give it a name (eg mapaPulsado)
    • Add an event handler clickto the circle pointing to the function you just created in the previous step.

    I've tested it and it works fine (the map is centered where you click inside the circle). This would be the part of the code that would change:

    //Evento del mapa que crea los marcadores al hacer click    
google.maps.event.addListener(map, 'click', function (event) {
    marcador.setMap(null);
    circulo.setMap(null);
    marcador = new google.maps.Marker({
        map: map,
        draggable: true,
        position: event.latLng,
        animation: google.maps.Animation.DROP
    });
    marcador.addListener('click', toggleBounce);
    estandarizarPos(event.latLng);
    google.maps.event.addListener(marcador, 'dragend', function () {
        estandarizarPos(marcador.getPosition());
    });
    circulo = new google.maps.Circle({
        strokeColor: '#44a373',
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: '#44a373',
        fillOpacity: 0.25,
        map: map
    });
    circulo.setRadius(parseInt(inpRadius.value) * 1000);
    circulo.bindTo('center', marcador, 'position');
});

    What would happen to be like this:

    //Evento del mapa que crea los marcadores al hacer click    
google.maps.event.addListener(map, 'click', mapaPulsado);

// función que se llama cuando se pulsa en el mapa o en el círculo
function mapaPulsado(event) {
    marcador.setMap(null);
    circulo.setMap(null);
    marcador = new google.maps.Marker({
        map: map,
        draggable: true,
        position: event.latLng,
        animation: google.maps.Animation.DROP
    });
    marcador.addListener('click', toggleBounce);
    estandarizarPos(event.latLng);
    google.maps.event.addListener(marcador, 'dragend', function () {
        estandarizarPos(marcador.getPosition());
    });
    circulo = new google.maps.Circle({
        strokeColor: '#44a373',
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: '#44a373',
        fillOpacity: 0.25,
        map: map
    });
    circulo.setRadius(parseInt(inpRadius.value) * 1000);
    circulo.bindTo('center', marcador, 'position');

    // añadimos el controlado del click para el círculo
    circulo.addListener("click", mapaPulsado);
}
    • 4