Ask your WordPress questions! Pay money and get answers fast! (more info)

WPGoogleMaps and Catalyst responsive design WordPress

Hi Guys

I have this site http://174.122.49.67/~paulster/kycmap.com/wordpress/

The design of which is responsive. However I cannot workout how to make the map responsive too.

The plugin support site suggest adding .wpgmza_map { width:100%; } to my custom css

http://www.wpgmaps.com/forums/topic/can-it-scale-ie-for-a-responsive-site/

Whatever try is not working as it should so I must be doing something wrong.

Can anyone firebug this for me and give me some ideas to try?

That would be great

Thanks
Steve

Answers (4)

2012-10-19

Gabriel Reguly answers:

Hi Steve,

With Firebug I can make it 100%, but what are you looking for?

I mean, should the map be 100% or should it's zoom level be set to be one image only?

Regards,
Gabriel


Steve Watson comments:

I want the map to adjust to whatever it is being veiwed in. So if someone views it on an iPhone they dont have to do any scrolling. The rest of the site is set up as responsive so changing the fixed pixel size of the map in the css to % I thought would achieve this.

I am however not fluent in css :) so i could be talking "ollox


Gabriel Reguly comments:

Ok, I think I get it.

You want the viewport of the map to fit the screen, correct?

Trouble is that you also need to refresh the images from G Maps.

Let me see if I can code something for this.


Gabriel Reguly comments:

Hi Steve,

Would you consider using this other map plugin [[LINK href="http://wordpress.org/extend/plugins/theme-blvd-responsive-google-maps/"]]http://wordpress.org/extend/plugins/theme-blvd-responsive-google-maps/[[/LINK]]?

Seems it can do what you want.

Regards,
Gabriel


Gabriel Reguly comments:

Hi Steve,

Any luck with the answers?

Regards,
Gabriel

2012-10-19

jazbek answers:

Hi Steve,

I was able to do this in firebug by adding

.wpgmza_map: {
width: 100% !important
}


to the css. The !important is... important... because the plugin is setting a width on the element style attribute, so you need to override that.

HTH.

2012-10-19

Christianto answers:

Hi Steve,

Your site maps width & height is define with jQuery/Javascript.
The place is on wpGoogleMaps.php around line 332 and up.. ( the position may little different in your plugin )
you will see this code
jQuery("#wpgmza_map_1").css({
height:'<?php echo $wpgmza_height; ?><?php echo $wpgmza_height_type; ?>',
width:'<?php echo $wpgmza_width; ?><?php echo $wpgmza_width_type; ?>'
});


And the selector will be different since you using "#wpgmza_map_1"

you can commented that line and define the width manually using css to make responsive..
on your style.css file you can add for example:

@media only screen and (max-width: 1024px) {
#wpgmza_map_1 {
width: 100%;
height: 500px;
}
}

@media only screen and (max-width: 800px) {
#wpgmza_map_1 {
width: 100%;
height: 400px;
}
}

@media only screen and (max-width: 320px) {
#wpgmza_map_1 {
width: 100%;
height: 320px;
}
}


So you can define not only the width but also the height of your maps.
Hope this help

2012-10-19

Arnav Joy answers:

try to remove width from div with in plugin file having class "wpgmza_map" and then use width:100% as suggested by forum or directly change width:100% at the plugin file then it will work.