Determining if an event is already associated with a marker in Google Maps API v3

I've set up a marker with a click event listener attached to it. However, I want to check if the click event has already been added to the marker, and if not, add the click event listener.

// Add click event listener if it doesn't already exist
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map, marker);
});

Alternatively, I can use a custom flag in the marker object like this:

// Add click event listener if it doesn't already exist
if (! marker._isClickEventBound) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
    marker._isClickEventBound = true;
  });
}

This code is run when a new marker is added or when editing an existing marker. I'm just wondering if there's a way to achieve this without using a flag?

Answer ā„–1

It is perfectly acceptable to include a flag.

In addition, when you use google.maps.event.addListener, it provides you with an event object. You can maintain a record of all event objects you've added to easily manage and remove marker events as required...

Answer ā„–2

Check if listeners are present with the hasListeners method:

google.maps.event.hasListeners(marker,'click')

This method can also be used with the map object:

google.maps.event.hasListeners(map,'idle')

Answer ā„–3

One way to resolve the issue would be to delete all event listeners and reattach them.

google.maps.event.clearListeners(map, 'click');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an issue where the Angular build is unable to locate the installed Font-Awesome node module

Every time I attempt to compile my project using ng build --prod, I encounter the following error: ERROR in ./src/styles.scss Module build failed: ModuleBuildError: Module build failed: Error: Can't resolve '~font-awesome/css/font-awesom ...

jQuery not triggering when selecting items from dropdown list

I used to have a dropdownlist in my HTML with the following code: <select id="customDropDown" name="mydropdown"> <option value="CourseIDFilter"id ="1" class ="choosefilter" >Course ID </option> <option value="CourseNameFilter" i ...

Optimize Date Formatting within a React Application Using Material UI Data Grid

I am currently working with MUI Data Grid Pro and I have an issue with filtering dates in the format dd-mm-yyyy. While the dates are displayed correctly in the columns, the filtering defaults back to mm-dd-yyyy. https://i.stack.imgur.com/Ue12K.png For mo ...

Creating JavaScript validation conditions based on certain criteria

I am currently working on validating whether a username exists in the database or not. If it does exist, an error message should be displayed, and the user should be prevented from adding details to the database until they edit the username field to make i ...

Passing two variables through a Javascript URL to dynamically update a dropdown menu based on the specified values

What is the best way to send two variables to a JavaScript function in order to modify the dropdown list according to those values? $(document).ready(function() { $("#date").change(function() { $(this).after('<div id="loader">& ...

Modifying Arrays with Different Data Structures in JavaScript

I am interested in implementing the following scenario: var A = ["Jon","Brad","Rachel"]; var B = ["Male","Male","Female"]; var C = [ {"Jon","Male"}, {"Brad","Male"}, {"Rachel","Female"} ] Can you guide me on how to retrieve var C using javascrip ...

Please do not exceed two words in the input field

I need to restrict the input field to only allow up to two words to be entered. It's not about the number of characters, but rather the number of words. Can this restriction be achieved using jQuery Validation? If not, is there a way to implement it u ...

Execute code when a specific event is being attached in jQuery

When using JQuery, custom events such as .bind("foo", function(e)... are well-supported. But what if the event triggering mechanism is not yet prepared and needs to be created only on elements with the event already bound? For instance, let's say I w ...

Vue Mutation IndexOf returns a value of -1

Hey everyone! I'm facing a challenge with deleting a "product." Although the product is successfully removed from the database, I'm encountering an issue with removing it from the VuexStore array of products. Here's what I've tried so f ...

Adding turbolinks to an HTML document can be achieved without the need for a

Recently delving into the world of turbolinks, I discovered that it can be employed independently without relying on a client-side javascript framework. Eager to test this out, I created a bootstrap 4 template and attempted to install it. Firstly, I downl ...

Could you please explain the distinctions among onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?

When it comes to editing my code, I rely on JSFiddle. However, I have noticed that in certain instances when running JavaScript or jQuery, the code only works if I choose "No wrap - <head>" or "No wrap - <body>". CLICK HERE FOR THE JSFIDDLE EX ...

Effortless Inertia Scrolling Implemented in Next.js

My search for achieving smooth inertia scrolling in next.js has left me unimpressed with the available solutions, as they either lack performance or come with some drawback. This medium article and sandbox demo provided a choppy experience, While this jav ...

Upon the second click, the addEventListener function is triggered

When using the window.addEventListener, I am encountering an issue where it only triggers on the second click. This is happening after I initially click on the li element to view the task information, and then click on the delete button which fires the eve ...

Substitute any text string starting with a colon, such as the route path in Express

Below are some sample strings: const a = '/example/:someItemUuid/hello' const b = '/example/:someItemUuid/hello/:otherItemUuid' const params = { someItemUuid: '12345', otherItemUuid: '67890' } I am in search o ...

In order for the Facebook share button to appear, a page reload is required when using Angular

I've been working on integrating Facebook's share plugin, but I've encountered an issue where the share button only shows up after reloading the page. If I navigate to the page through a link or URL, the button doesn't appear until afte ...

PHP and JS with Jquery often face challenges when trying to work together due to their conflicting array structures

This is a perplexing issue that has me stumped. I retrieved an array of workers from a MySQL database using json_encode and then copied it to two other arrays for future operations. var workers = <?php echo json_encode($tablica_pracownikow); ?>; va ...

Issue with Discord.js: Newly joined user's username appears as undefined

robot.on('guildmateEntry', person =>{ const greeting = new Discord.MessageEmbed() .setTitle(`Greetings to the realm, ${individual}!`) const room = person.guild.channels.cache.find(channel => channel.name === " ...

Tips on sending filter parameters from AngularJS to Spring RestController using @MatrixVariable

Iā€™m struggling to figure out how to use $http.get in AngularJS to pass filter parameters. The URL is: http://localhost:8080/template/users/query;username=abcd;firstName=ding... The RestController looks like this: @RequestMapping(value={"/users/{query ...

What causes Gun.js to generate duplicate messages within a ReactJs environment?

I need assistance with my React application where gun.js is implemented. The issue I am facing is that messages are being duplicated on every render and update. Can someone please review my code and help me figure out what's wrong? Here is the code s ...

Values in Local Storage are not located upon first attempt, but after a reload they function properly

import {useEffect} from 'react'; import {useRouter} from 'next/router'; const AuthenticationGuard=props=>{ const {children,fallback} = props; const auth = useAuth(); const router=useRouter(); useEffect(()=>{ if(!r ...