Leaflet Maps Marker (Google Maps, OpenStreetMap, Bing Maps)
[resolved] Zoom and basemap controls don't appear in widget-embedded map (3 posts)

  1. mbrakken
    Posted 3 years ago #

    But they do appear in the full page map.

    You can see what I'm talking about here: http://dev.horizoncw.com

    Thanks for the fantastic plugin! I just started experimenting with it last night and it's quite awesome.

    I have a map layer I've embedded in a text widget that displays markers and everything fine. However, the embedded map does not display zoom controls or the basemap layer switcher. There is a grey dot in the top left corner that's clearly a placeholder for the zoom controls, and the appropriate code for the controls appears in the page source. The actual [+] and [-] icons do not appear, however. It's probably worth mentioning that the scale object on the lower left does show and works/responds appropriately.

    When I click through to the full page map I do get all controls displayed.

    The site is very minimal right now, with only this modul and the Responsive theme added to a fresh install.

    Thanks for your time.


  2. RobertHarm
    Plugin Author

    Posted 3 years ago #

    Hi Marc,

    thanks for your nice feedback (I´d appreciate your review at http://wordpress.org/extend/plugins/leaflet-maps-marker/review even more ;-)

    Concerning the issue with the map in your widget: the problem is your css in style.css which overwrites the leaflet css. Try outcommenting
    the following parts and see if this helps (might have sideeffects with tagcloud widgets if you use them too):

    #widgets .tagcloud, #widgets .textwidget {
        display: block;
        line-height: 1.5em;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        word-wrap: break-word;
    #widgets .textwidget a {

    the marker icon images also get shrunk by your css - they are normally larger. I think the following css is responsible (but am not sure - try outcommenting this part of the code to check):

    #widgets .widget-title img {
        float: right;
        height: 11px;
        position: relative;
        top: 4px;
        width: 11px;



  3. mbrakken
    Posted 3 years ago #

    Hi Robert!

    Thanks for the quick reply!

    I feel silly now that I didn't realize it was a css issue. It was controlled by

    #widgets text widget a {
         display: inline;

    so vanished to the nether regions. An override to display:block fixed it.


Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic