CODEWITHSUNDEEP
javascriptjquerygoogle-mapsmeteorinfowindow
ziggy
ziggy

Reputation: 15

How do I trigger a modal/pop up using an infowindow button in Meteor?

I have a Google Maps InfoWindow. The content of the InfoWindow comes from a variable called contentString in my JS. 

//content of InfoWindow
contentString = 
'<div class="alertPreview">
    <img class="alertPreviewImage" src="">
    <h3 class="alertPreviewTitle">' + 
        document.alertName + 
    '</h3> 
    <h6 class="alertPreviewLocation">' + 
        document.alertMunicipality + 
        '' + 
        document.alertProvince + 
    '</h6>
    <text class="alertPreviewContent">' + 
        document.alertDetails +
        '</br>
    </text>
    <button type="button" id="moreDetailsButton" class="btn btn-link alertDetailsButton">
        More Details 
     </button>
 </div>'

Note that the single quotes in the above code are ticks in JS.

I want to access the button in my contentString so that it triggers a modal/pop up. I was thinking of the following:

  1. Somehow place a Meteor template in my contentString and then use template events for the button.

  2. I can add an event listener. My button value is printed when I console.log($('#moreDetailsButton').html()) but I can't use it for my event listener:

    google.maps.event.addListener($('#moreDetailsButton').html(), 'click', function(
    console.log('button clicked')
})

What am I doing wrong? What am I missing? Any suggestions?

Upvotes: 0

Views: 915

Answers (1)

Mathieu K.
Mathieu K.

Reputation: 933

You should be able to access the event from the template that contains your map in the normal meteor way: 

Template.map.events({
   "click #moreDetailsButton": function(e,t){ 
      console.log('hello');
   } 
})

You can use a template in you infowindow but I found that weird because the template isn't reactive as it is rendered when the infowindow is declared. I found that a simpler way to do this is to use plain modals instead of the provided infowindow. EDIT : In order to display the proper data that you can use the id of the marker (or whatever data is available when you instanciate your marker) and a session variable:

  marker.addListener('click', function() {
     Session.set('iwModalData', marker.id);
     $('#alertPreviewModal').modal('show');
  });

And then display proper content in your modal template from the session var information. If the only thing you'd want to display was the id of the marker : 

Template.iwModalContent.helpers({
   "iwContent": function(){
      return Session.get('iwModalData');
   }
})

Upvotes: 1

Related Questions