title: Adding marker on click google maps
body: <p>I want to be able to add marker on the map by click only after pressing the button &quot;add marker&quot; but the button doesn't work, the function runs even before I press the button.
  <a href="https://jsfiddle.net/snoLg0tp/" rel="nofollow noreferrer">https://jsfiddle.net/snoLg0tp/</a></p>
  <pre><code>        &lt;input id=&quot;add-markers&quot; type=&quot;button&quot; value=&quot;Add marker&quot; /&gt;
      
          function initMap() {
            const haightAshbury = { lat: 37.769, lng: -122.446 };
          
            map = new google.maps.Map(document.getElementById(&quot;map&quot;), {
              zoom: 12,
              center: haightAshbury,
              mapTypeId: &quot;terrain&quot;,
            });
            // This event listener will call addMarker() when the map is clicked.
            map.addListener(&quot;click&quot;, (event) =&gt; {
              addMarker(event.latLng);
            });
        document
        .getElementById(&quot;add-markers&quot;)
          .addEventListener(&quot;click&quot;, addMarker);
          
              function setMapOnAll(map) {
                for (let i = 0; i &lt; markers.length; i++) {
                  markers[i].setMap(map);
                }
              }
              function addMarker(position) {
                const marker = new google.maps.Marker({
                  position,
                  map,
                });
  </code></pre>