I want center my marker on popup open.. and centering map not in marker latlng, but on center of marker and popup! The problem is that popup has dinamic content(loaded on click).

The map size is full display size in a mobile device! I'm just used autoPanPadding option in popup but not sufficient

Refer to follow picture:

enter image description here


This question was also asked on Stack Overflow, and answered by Dan Mandle.

map.on('popupopen', function(e) {
    // find the pixel location on the map where the popup anchor is
    var px = map.project(e.popup._latlng);
   // find the height of the popup container, divide by 2 to centre, subtract from the Y axis of marker location
    px.y -= e.popup._container.clientHeight/2;
    // pan to new center
    map.panTo(map.unproject(px),{animate: true});
  • 3
    Could you explain exactly what your code does with comments and accept it as a solution? – GISKid Jun 2 '14 at 18:58
  • There are 3 lines of code is self explanatory – stefcud Jun 2 '14 at 20:54
  • 5
    @StefanoCudini It is always a good gesture to credit the actual author for exactly the same question you have asked elsewhere. – thelastray May 15 '17 at 11:27
  • 3
    @GISKid The actual answer has explanatory comments. – thelastray May 15 '17 at 11:30
  • 1
    @thelastray good catch – GISKid May 16 '17 at 16:36

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.