google maps vs img definition

User 78051 Photo


Registered User
199 posts

As you can see from the screengrab http://prntscr.com/6fe9ca on the google map there is an issue in that the zoom and streetview icons are not being shown.

It seems that this is being caused by the max-width:100% found in coffeegrinder.min.css img definition:
img {
border: 0 none;
height: auto;
max-width: 100%;
vertical-align: middle;
width: auto;
}
but if that is removed, then I lose the responsiveness of the images on the site.

Has anyone else come across this and found a solution?

I noticed from this thread http://www.coffeecup.com/forums/respons … post235310 that an example by Eric Rohloff also suffering from my issue

TIA

Jamie
User 271657 Photo


Senior Advisor
3,816 posts

Jamie, have you made any progress?
If not, could you post a link to the page?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 78051 Photo


Registered User
199 posts

no progress am afraid. Here's the link http://www.ranmoordorset.co.uk/contact.php

Thanks for your help

Jamie
User 2088758 Photo


Senior Advisor
2,700 posts

Hi Jamie,

You might want to check this tread out.

http://www.coffeecup.com/forums/responsive-layout-maker/google-maps-in-rlm/

I found this helpful too:
https://niklausgerber.com/blog/responsive-google-or-bing-maps/
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 271657 Photo


Senior Advisor
3,816 posts

I doubt I can figure this out, but I usually start here (HTML and CSS):
http://validator.w3.org/check?uri=http% … mp;group=0
Get all the nit-picky code errors out of the way – sometimes that gets rid of whatever was the problem in the first place.
If that doesn't help, at least you know it's not a missed closing tag or ;.

It seems odd that the map is placed within an Iframe rather than by the JS? For example:
<div id="map-canvas" style="width: 100%; height: 100%"></div> (no Iframe there)
Maybe this will help:
https://developers.google.com/maps/docu … t/tutorial
Also, there's a troubleshooting section at the bottom of the page.

I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 78051 Photo


Registered User
199 posts

Thank you both for your input - really appreciate it. Will wade through and see if I can make it work!

Jamie
User 78051 Photo


Registered User
199 posts

OK, I have had a play with what you have suggested and it seems to only work with <iframe> embedded maps rather than the one I have. I note that Eric Rohloffs example found here http://www.coffeecup.com/forums/responsive-layout-maker/google-maps-in-rlm/?post_id=235310#post235310 (which links to this map example http://ericrohloff.com/coffeecup/rlm/map_test/) suffers exactly the same issue with the zoom / streetview icons not showing.....and its is set up the same way that mine is.

I could not find any reference to the js maps as oppsoed to the <iframe> ones in the content you suggested I look through....
User 2484360 Photo


Registered User
3,293 posts

Jamie wrote:
OK, I have had a play with what you have suggested and it seems to only work with <iframe> embedded maps rather than the one I have. I note that Eric Rohloffs example found here http://www.coffeecup.com/forums/responsive-layout-maker/google-maps-in-rlm/?post_id=235310#post235310 (which links to this map example http://ericrohloff.com/coffeecup/rlm/map_test/) suffers exactly the same issue with the zoom / streetview icons not showing.....and its is set up the same way that mine is.

I could not find any reference to the js maps as oppsoed to the <iframe> ones in the content you suggested I look through....


Try adding this to your Stylesheet.css:

#wagmp_map_1 img {
max-width: 1850px;
}


User 78051 Photo


Registered User
199 posts

Adam - thats done it! Many many thanks. Realluy appreciate it.

Now, is the max-width: 1850px; figure an arbitrary number or have you based it on something specific?
User 2484360 Photo


Registered User
3,293 posts

Jamie wrote:
Adam - thats done it! Many many thanks. Realluy appreciate it.

Now, is the max-width: 1850px; figure an arbitrary number or have you based it on something specific?


The images for the street view "guy" are set to around 1200px, I just up'ed the amount so that it would not effect the actual map image as well.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.