Mappress_Map responsive width

[kbuchanan]

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

[Chris]

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.

[isao@yoshikoshi.name]

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

[Chris]

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"]

[isao@yoshikoshi.name]

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

[Author]

Posts