11

I created a popup with Leaflet doing so:

marker.bindPopup(content).openPopup();

How can I update the content value afterwards?

I suppose to do it from the marker, something like this:

marker.updatePopup(newContent);
9

I suppose you want the content to be changed after some event occured, like mouseover, contextmenu, or anything else.

To do so, you can use the following code:

//marker creation
var marker = L.marker([44.63, 22.65]).bindPopup('something').addTo(map);
marker.openPopup();

//changing the content on mouseover
marker.on('mouseover', function(){
    marker._popup.setContent('something else')
});

As you can see, you can acccess the popup for the desired marker using marker._popup method, and then use setContent method to change the text inside it.

popup.setContent method reference

Here's some code on Plunker demonstrating this: http://plnkr.co/edit/vjS495QPXiJpKalrNpvo?p=preview

  • I found that in the mouseover I needed to do: this.getPopup.setContent(' blah blah blah'); – TheSteve0 Aug 30 '16 at 16:05
15

_popup has an underscore in front of it to indicate that it's a private / member instance, and should not be accessed directly. The correct API is Layer.setPopupContent(). e.g. marker.setPopupContent(newContent);

3

Might be to late to reply, but for others, I think the best ways is here

http://jsfiddle.net/cPTQF/

$('button').click(function() {
   // Update the contents of the popup
   $(popup._contentNode).html('The new content is much longer so the popup should update how it looks.');

   // Calling _updateLayout to the popup resizes to the new content
   popup._updateLayout();

   // Calling _updatePosition so the popup is centered.
   popup._updatePosition();
   return false;
});
  • I know this is old, but it came up in my Google search results so that means it might for others as well...The issue with this method is that #1 if the popup is not currently open, that button click (or whatever you bind to) does nothing. Secondly, if you dimiss the popup and click it again, you get the original content, not the new content! – D.R. Jul 20 '17 at 3:10
1

You can get the popup content with:

marker.getPopup().getContent();

Set the content it with:

marker.getPopup().setContent("123");
marker.getPopup().update();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.