google maps vs img definition

Mar 13th, 2015 at 09:30 AM
User 78051 Photo

Jamie
Registered User
201 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
http://www.motley.co.uk
Mar 15th, 2015 at 05:29 PM
User 271657 Photo

paintbrush
Ambassador
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
Mar 16th, 2015 at 11:35 AM
User 78051 Photo

Jamie
Registered User
201 posts

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

Thanks for your help

Jamie
http://www.motley.co.uk
Mar 16th, 2015 at 12:05 PM
User 2088758 Photo

Steve
Senior Advisor
3,106 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
Mar 16th, 2015 at 12:35 PM
User 271657 Photo

paintbrush
Ambassador
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
Mar 16th, 2015 at 03:43 PM
User 78051 Photo

Jamie
Registered User
201 posts

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

Jamie
http://www.motley.co.uk
Mar 17th, 2015 at 11:44 AM
User 78051 Photo

Jamie
Registered User
201 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....
http://www.motley.co.uk
Mar 17th, 2015 at 12:23 PM
User 2484360 Photo

Adam East
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;
}


Mar 17th, 2015 at 12:40 PM
User 78051 Photo

Jamie
Registered User
201 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?
http://www.motley.co.uk
Mar 17th, 2015 at 12:44 PM
User 2484360 Photo

Adam East
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.