Leaflet bind popup not working consistently


#1

Hi!

I’m trying to build a simple leaflet map application, but I’m not being able to make the marker’s popup to open consistently. Most times it doesn’t, but some it does. A bunch of guys posted a solution using data-tap-disabled=true, but that aint working for me. Does someone have any idea of what might be?

Below there’s a snippet of my code, but I’m also using tabs and url routing besides that. I’ll be thankful if anyone can at least give me a tip for where to look.

<script id="location.html" type="text/ng-template">
        <ion-view title="Location" >
          <ion-content  has-header="true" padding="false">
            <div id="map" data-tap-disabled="true"></div>
          </ion-content>
        </ion-view>
</script>
</body>

var markers = new L.featureGroup();
markers.addLayer(L.marker([latlon[0], latlon[1]]));
cart.forEach(function(source){
    var coords = source._source.store_information.location;
    var cnpj = source._source.store_information.cnpj;
    var marker = L.marker([coords.lat, coords.lon]);
    marker.on('click', onClick);
    marker.bindPopup('A pretty CSS3 popup. <br> Easily customizable.');
    markers.addLayer(marker);
    //.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
    //.openPopup();

});
map.addLayer(markers);
map.fitBounds(markers.getBounds().pad(0.08));

#2

I am having the same problem…


#3

I got this to work this way:

 var map_results = L.map('map_results_canvas', { zoomControl:false });
 var markers = new L.FeatureGroup();

 map_results.addLayer(markers);
 var m = L.marker([animal.location_latitude, animal.location_longitude], {icon: dogIcon});
 m.addTo(markers).bindPopup("your message here");

the key was to call bindPopup after adding the marker to the markers group.