Niek Nijland Niek Nijland - 1 year ago 101
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?


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);

function contains the following code which opens a sidebar:

var markerClicked = function() {

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.

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 Source

You can check this example:

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

<!DOCTYPE html>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Simple markers</title>
            html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            #map {
            height: 100%;
        <div id="map"></div>
            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 async defer

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


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) {
    google.maps.event.trigger(self, 'click', event);

Here is an updated codepen:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download