[Plugin: Basic Google Maps Placemarks] How to tweak the code to get % width instead of fixed px

Hi Flavio, you can’t override the width/height in a stylesheet, because it’s set by the JavaScript file at runtime. I’ll look into a better way to handle it in the future, but here’s how you could use a % width instead of pixels for now:

1. Open functions.js
2. Line 73 says: $(‘#bgmp_map-canvas’).css(‘width’, response.width );
3. Just change it to say: $(‘#bgmp_map-canvas’).css(‘width’, response.width + ‘%’ );
4. You’re just adding the: + ‘%’
5. You can do the same thing for the height and info window width/height
6. Then you can enter the values on the Writing page as percents instead of pixels

To center the map, you could add this to your theme’s style.css file:

#bgmp_map-canvas
{
    margin-left: auto;
    margin-right: auto;
}

WoW! Thank you very very much! Works perfectly!

Hi.

I upgraded to the latest version (1.3) and I have noticed that now one can insert the width in percent from the setting page.

i.e. if one writes “95” then pixels is taken as a default and the width of the map is “95 pixels”, but if one writes “95%” the map is sized as a percent of the column/page.

No need to change functions.js – Super!

You may want to change the documentation/ the text shown on the setting page itself, so that everyone can take advantage of the functionality!

Great plugin!

Hmmm, that’s actually an unintended consequence of another change I made, but I’m glad it worked for you.

I’ll probably need to do some testing to make sure that works across browsers, but hopefully it’s that simple ??

Hi Ian,

I have opened functions.js but can’t seem to find:
$(‘#bgmp_map-canvas’).css(‘width’, response.width );

I found:
// Override default width/heights from settings
$(‘#bgmp_map-canvas’).css(‘width’, bgmpData.options.mapWidth );
$(‘#bgmp_map-canvas’).css(‘height’, bgmpData.options.mapHeight );

I would like to set my map size to a percentage of the column size.

Please advise. Thanks!

j-dubs, see FlavioSerra’s last post in this thread. You don’t need to edit functions.js.

Hi, I want show map with different size in the post. From the setting page, i am using bigger size for full width page. But how can I change width for other pages (it uses sidebar).