Mappress_Map responsive width

Home Forums MapPress Support Mappress_Map responsive width

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #14087
    kbuchanan
    Participant

    Hi,
    I’m using php to create the map dynamically. Want to be able to set the width and height to a % for when on different screen sizes but when the height and width won’t take any other input other than a number, which it then converts to pixels.

    Is there another way to do this?

    The code:

    $mapwidth = 1000;
    $mapheight = 350;
    $mymap = new Mappress_Map(array(“width” => $mapwidth, “height” => $mapheight, “center” => array(“lat” => $mapcenterlat, “lng” => $mapcenterlng), “zoom” => $mapzoom ));

    Thanks,
    Keith

    #14089
    Chris
    Keymaster

    Hi,

    This should work:

    $mapwidth = "100%";
    $mapheight = "100%";

    Note that if you set a height in %, you must have a containing element around the map that has an explicit height. Otherwise the browser will treat 100% of nothing, or zero.

    #14609

    Hello,

    Using this code, I’ve got zero height map.
    Any suggestions?

    <div style="width:480px; height:480px;">[mappress id="1" width="100%" height="100%"]</div>

    Page source code from browser:

    <div style="width:480px; height:480px;">
    <div id="mapp1_layout" class="mapp-layout mapp-align-default" style="width: 100%; ">
    <div id="mapp1_links" class="mapp-map-links"></div>
    <div id="mapp1_dialog" class="mapp-dialog"></div>
    <div id="mapp1" class="mapp-canvas" style="width: 100%; height: 100%; "></div>
    <div id="mapp1_directions" class="mapp-directions" style="width:100%"></div><div id="mapp1_poi_list" class="mapp-poi-list" style="width:100%"></div></div></div>

    Thanks,
    Isao

    #14610
    Chris
    Keymaster

    Hi,

    I think I see the problem – the plugin sets width on the outermost div but the height is set on the inner canvas div. This works if the height is in pixels but not if it’s in %.

    To make % height work you’ll need to either modify the template file ‘map_layout.php’ or use CSS. For CSS, if you give your container div the id ‘xyz’ something like this might work:

    #xyz .mapp-layout { height: 100% }

    Or maybe you could just include the height and width in the shortcode directly:

    [mappress id="1" width="100%" width="480" height="480"]

    #14621

    Hi,

    I think I’ve solved my problem.
    I want to make map responsible not only width but also height (eg. on iPhone, fit width to screen and set height to 300px).
    I’ve set height of mapp-canvas class in custom CSS (including media query), it works.

    Thanks for your quick help!

    Isao

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.