Niek Nijland Niek Nijland - 2 months ago 28
Javascript Question

Listen to click on ONLY on the map of Google Maps embed

I have a Google Map with markers on it. When the user clicks on a marker, a sidebar slides out by adding a class to the sidebar element.

Now, I want to hide the sidebar when the user clicks somewhere on the map.

I added an click event listener on the map, but it also gets triggered when the user clicks on the marker. So the sidebar is shown and hidden immediately.

Marker event listener:

maps.event.addListener(marker, 'click', markerClicked);


Map event listener:
maps.event.addListener(map, "click", function() {


How can I detect a click ONLY the map?

---EDIT---

Allright, some code on request:

For every marker I add to the map I activate a click event listener like this:
google.maps.event.addListener(marker, 'click', markerClicked);


The
markerClicked
function contains the following code which opens a sidebar:

var markerClicked = function() {
$('.sidebar--slide-in').addClass('sidebar--slide-in-active');
};


Also when the map is created I activate a click event listener for the map, like this:

google.maps.event.addDomListener(map, "click", function() {

});


The marker click listener works like a charm. When a marker is clicked, it returns the clicked marker. When the map is clicked nothing happens.

The map click event listener however returns an object when the map is clicked, but also when a marker is clicked.

When the map is clicked(not when a marker is clicked!) I want to close the sidebar. How do I do this?

---EDIT 2---

I failed to mention I use custom markers. I thought this didn't affect the problem in any way. It appears it does. I copied the codepen from @Dekel and added my custom marker in it.

http://codepen.io/nieknijland/pen/QKyaxw

Now when you click the marker both alerts are triggered. I just want te marker alert te be triggered, not the map click event.

Answer

You can check this example:
http://codepen.io/anon/pen/dpoqPK

This is the code (doesn't work in snippet)

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Simple markers</title>
        <style>
            html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            }
            #map {
            height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            function initMap() {
                var myLatLng = {lat: -25.363, lng: 131.044};

                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: myLatLng
                });

                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: 'Hello World!'
                });

                google.maps.event.addListener(marker, 'click', function() {
                    alert('Marker clicked')
                });

                google.maps.event.addDomListener(map, "click", function() {
                    alert('Map clicked')
                });
            }
        </script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap">
        </script>
    </body>
</html>

Make sure to add the event listener on the map after the map is initialized

Update

If you use a custom marker and you want to prevent the click event on the map when you click on the marker you can add the stopPropagation function of the event when clicked on that marker:

google.maps.event.addDomListener(marker, 'click', function(event) {
    event.stopPropagation();
    google.maps.event.trigger(self, 'click', event);
});

Here is an updated codepen:
http://codepen.io/anon/pen/RGAQdW

Comments