CODEWITHSUNDEEP
javascriptjquerygoogle-mapsbuttonclick
Danyal Imran
Danyal Imran

Reputation: 77

Infowindow Button jQuery Event

I am having trouble executing a jQuery function that is called when someone clicks Edit, Share or Delete on the infoWindow div.

var markers = [];
for(i=0; i<array.length; ++i) {
  var marker = new google.maps.Marker({
    position: {lat: parseFloat(array[i]['latitude']), lng: parseFloat(array[i]['longitude'])},
    map: map
  });

  var id = array[i]['id'];
  var edit = 'edit', share = 'share', del = 'delete';
  var cString = '<div style="margin: auto; text-align: center; font-family: Tahoma, Geneva, sans-serif;"><strong>Location Name: </strong>' + array[i]['title']
  + '<br><strong>Location Description: </strong>' + array[i]['description']
  + '<br><br><br><div class="btn-group"><button type="button" class="btn btn-primary '+edit+'" id="' + id + '">Edit</button><button type="button" class="btn btn-primary '+share+'" id="' + id + '">Share</button><button type="button" class="btn btn-primary '+del+'" id="' + id + '">Delete</button></div>';

  contentString.push(cString);
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infoWindow.setContent(contentString[i]);
      infoWindow.open(map, marker);
    }
  })(marker, i));

  // this is the function
  $('button').click(function() {
    console.log('clicked');
  });

  markers.push(marker);
}

It doesn't display clicked for buttons assigned to infoWindow but does for other buttons like signout, view profile etc.

Array is a JSON array that has has the structure: 

[
  {
    id:"1"
    description:"I am Loving It! ↵McArabia Combo Meal: 520 Rs/-"
    latitude:"25.28919345"
    longitude:"67.11113134"
    title:"McDonalds"
    type:"favourite"
  },//....
  //......
]

How can i fix this?

Upvotes: 1

Views: 951

Answers (2)

Mosh Feu
Mosh Feu

Reputation: 29277

Further @anu comment:

That's because the infoWindow added to the DOM only when in the function infoWindow.open(map, marker); so when you bind the click to the buttons, the infoWindow's button not included.

And Live example:

$(document).on('click', '.info-button', function(){
  alert('button clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      // This example displays a marker at the center of Australia.
      // When the user clicks the marker, an info window opens.

      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });

        var contentString = '<div id="content">'+
            '<button class="info-button">Click on it</button>' +
            '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        var marker = new google.maps.Marker({
          position: uluru,
          map: map,
          title: 'Uluru (Ayers Rock)'
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
    </script>
  </body>
</html>

Upvotes: 3

Anupam
Anupam

Reputation: 8016

You are adding those buttons dynamically after the page has loaded. You need to attach the click event on buttons using .on() function.

$(document).on( "click", "button", function() {
  console.log('clicked');
});

And dont add this event binding inside for loop. Put this in document ready. This is just for basic info, follow this link to read more about on() and how to use proper selector/container.

Upvotes: 3

Related Questions