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

Question

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

Navigation

#1 by (3 votes)

4

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

My problem is that if I click inside the radio it does not call me to the event that makes the marker move to the position of the pointer, since the radius is above it.

What can I do to make the circle look but not affect the 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 google-maps

asked by Carlos Quiroga 21.01.2016 в 00:48

source

1 answer

How to select 'onclick' with random 'id'? Extract XML data using Python

score 3 · Accepted Answer

A possible solution is not to prevent the clicks from affecting the circle, but the opposite: to listen to the clicks and to 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 out the anonymous function in the event handler click of the map and give it a name (for example, mapaPulsado )
Add a handler for the click event in the circle pointing to the function you just created in the previous step.

I've tried it and it works well (the map focuses on the place 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 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);
}