Adjust the Google Maps width for mobile

[Anonymous]

My Google Map on the event page is blowing through the right side of the viewport in mobile. (It’s making the rest of the screen tiny in Android, as the map width is setting the size for the rest of the screen.)

In eme.css, I’ve tried:

.eme-location-map {max-width:100%; height: auto;}

…and even specific mobile screen sizing:

@media screen and (max-width:400px){
.eme-location-map {width: 300px !important;height: auto;}
}

Any other ideas? Thx Franky…

[Anonymous]

Example page:
http://neohgolf.com/events/1070/turkeyfoot-2-m-spring-scramble/

[Franky]

I need to test this too, but take a look at this article :
http://webomnizz.com/how-to-make-responsive-google-map-with-google-map-api/
Using the Google maps api, this should be possible. So we just need to change the location js file for this (to be tested ).
Moving to bugs until I can test it.

[Franky]

The current development version should take this into account now: resize results in redrawing the map, and the width can be 100% now too (using CSS that was already possible).
If you want to test it …

[Anonymous]

I agree with the idea, but the comments on that page you reference poke at a couple of different issues.

I wouldn’t add the weight of another js resource, as css should do the trick. I found css to wrap the iframe. Examples:

http://www.labnol.org/internet/embed-responsive-google-maps/28333/

<style>
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>

<div class=”google-maps”>
<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804&#8243; width=”600″ height=”450″ frameborder=”0″ style=”border:0″></iframe>
</div>

http://www.coffeecup.com/help/articles/adding-responsive-google-maps-to-responsive-layout-maker/

.cc-map-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.cc-map-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

I’ll add this to my eme.css and see if I can get it to work…

[Anonymous]

I think I just noticed something: your div eme-location-map doesn’t wrap the map code, it closes in front of it.

<div id=’eme-location-map_847083270_1426855310_55′ class=’eme-location-map’></div><script type=’text/javascript’>
<!–//
latitude_847083270_1426855310_55 = parseFloat(‘40.6174’);
longitude_847083270_1426855310_55 = parseFloat(‘-81.4221’);
map_text_847083270_1426855310_55 = ‘<div><h4>Zoar Village Golf Club</h4><br />8229 Dover-Zoar Road NE<br />Zoar, OH 44697<br /><br>More Course Details ><br><br><br /></div>’;
enable_zooming_847083270_1426855310_55 = ‘true’;
zoom_factor_847083270_1426855310_55 = 9;
maptype_847083270_1426855310_55 = ‘ROADMAP’;
//–>
</script>

[Anonymous]

Ah, wait, now I see what you’re doing — you’re using js entirely to call the Location data, which I didn’t notice until just now. So the more simple iframe solution may not be an option without an overhaul, unless wrapping it all will work somehow…

[Anonymous]

‘The current development version’? Is that under the ‘Examples’ link above? Because the map is still fixed width there…

[Franky]

No, I can’t update that from here.
You can download the version by using this link:
https://downloads.wordpress.org/plugin/events-made-easy.zip

[Franky]

I just uploaded the dev version to this site, so th examples are now responsive.

[Anonymous]

Beautiful! Looks great Franky.

So will this be pushed out in an update?

Or is this a “here’s the code” thing I can implement myself, or pull from the .zip referenced above?

Thx…

[Franky]

It is in the zip, and will be in the next version.

[Anonymous]

Great, thx Franky. Just sent a Paypal donation…

[Author]

Posts