~~~ Please read before posting. ~~~

Important: We need your Club Number at a minimum, and as many details as possible.
For further info please read This page before posting.

Google Map sizing for mobile

  • marc33
  • marc33's Avatar Topic Author
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 271
  • Thanks: 41

Google Map sizing for mobile

6 years 11 months ago
#71845
We're moving locations so I created a new map iframe with the new location, but the map doesn't look good on my iPhone (it extends to the right). The last part of the iframe instruction is "width="600" height="550" frameborder="0" style="border:0" allowfullscreen." How should this be changed to mimic the picture resizing tip you gave (width 90%, height blank)?
The topic has been locked.
  • Brian
  • Brian's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 10587
  • Thanks: 3559

Re: Google Map sizing for mobile

6 years 11 months ago
#71848
Change to percent true the numbers you are happy with.
width="90%" height="90%" works for our club. Depends on what else you have on the page.
The topic has been locked.
  • marc33
  • marc33's Avatar Topic Author
  • Offline
  • FreeToastHost Ambassador
  • FreeToastHost Ambassador
  • Posts: 271
  • Thanks: 41

Re: Google Map sizing for mobile

6 years 11 months ago
#71849
Thanks Brian. Works great. Looking forward to have these settings in a form for novices, if you are still accepting suggestions Steve.
The topic has been locked.
  • SteveTheTechie
  • SteveTheTechie's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 11526
  • Thanks: 3050

Re: Google Map sizing for mobile

6 years 11 months ago - 6 years 11 months ago
#71852
This was an oversight on my part... I forgot to look at this particular iframe previously. Not every user is going to be up for adjusting their content to make it responsive. However, since the Google maps support has been a key feature of FTH for a very long time, I feel it is appropriate to make this particular iframe mobile friendly regardless of the user's technical abilities. In other words, I think this particular content is something where the code needs to do the "thinking" on behalf of the user--I am purposely trying to do too much of that.

Since I have ready access to the map iframe code, I have added some Javascript to make it responsive without any user intervention. The Javascript does a best guess of what is needed and adjusts the HTML accordingly "on the fly". It does not touch the actual iframe code, though.

You can just put the original iframe pixel dimensions in and let the Javascript sort it out.
Last edit: 6 years 11 months ago by SteveTheTechie.
The topic has been locked.
Moderators: BrianJane AtkinsonPamrhtaylor3marc33NotLiablejgavinLcala305peterb323
Time to create page: 0.147 seconds