Google Map responsive

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
Lasa
 
 
Posts: 346
Joined: Sat Oct 06, 2018 3:08 pm

Google Map responsive

Post by Lasa » Sat Mar 30, 2019 9:10 pm

I have tried to make an embeded google map repsonsive but I'm missing something.

I added a html with this in the body..
<div class="googlemap">
<iframe src="https://www.google.com/maps/embed?pb=!1 ... !1sen!2sus" width="1000" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Then added another html with this in the head:
<style>
.googlemap {
position: relative;
padding-bottom: 75%; /* 4:3 ratio*/
height: 0;
overflow: hidden;
}

.googlemap iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>

It does not want to get smaller on my Android!
seems to work well if I'm sizing the desktop browser.
Any ideas?
Lasa

Lasa
 
 
Posts: 346
Joined: Sat Oct 06, 2018 3:08 pm

Re: Google Map responsive

Post by Lasa » Sun Mar 31, 2019 12:30 am

I see the Google map in javascripts..but it needs an API.. it seems you have to give a creditcard to get your key.
If I'm only having a map showing the location of an establishment do you know if I will ever be charged?
Is there a way to make it responsive with the details I found online..
Cheers,
Lasa

User avatar
Pablo
 
Posts: 17331
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Google Map responsive

Post by Pablo » Sun Mar 31, 2019 7:28 am

If you have to many Google Maps requests then you will get charged.
Are you sure you do not need a key for your code too?

I'm sorry, I am not familiar with this code, for me it may also take a few hours to make this work. That is why I cannot give support on custom code.

Lasa
 
 
Posts: 346
Joined: Sat Oct 06, 2018 3:08 pm

Re: Google Map responsive

Post by Lasa » Sun Mar 31, 2019 1:42 pm

Thanks Pablo.
I find it strange that nobody has made a google map responsive?
or had trouble making one?
I'm missing something.
Cheers,
Lasa

User avatar
Pablo
 
Posts: 17331
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Google Map responsive

Post by Pablo » Sun Mar 31, 2019 1:49 pm

The built-in Google map script is responsive , meaning it can have different sizes in breakpoints.
However, it does not keep the aspect ratio like in your script. This functionality has never been requested by any other user, so I guess this not a common requirement.

Lasa
 
 
Posts: 346
Joined: Sat Oct 06, 2018 3:08 pm

Re: Google Map responsive

Post by Lasa » Sun Mar 31, 2019 3:36 pm

The aspect ratio was just a way to try and get the Google map to be responsive. I would prefer to not have it.
I got it to work but I would rather use the WWB built in Google map but it requires an API (Use a credit card) don't want it charged.
Wanted the embedded google iframe to be responsive... the aspect ratio is just a way around it.
maybe I'm not making sense...been at this one issue way too long.
Cheers,
Lasa

User avatar
Pablo
 
Posts: 17331
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Google Map responsive

Post by Pablo » Sun Mar 31, 2019 4:00 pm

I got it to work but I would rather use the WWB built in Google map but it requires an API (Use a credit card) don't want it charged.
As far as I know you will always need an API key to use Google Maps. It may work a few times without it, but eventually you will need a key.
Note that WWB also uses an inline frame for the Google Maps script.

User avatar
crispy68
 
 
Posts: 556
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Google Map responsive

Post by crispy68 » Sun Mar 31, 2019 4:21 pm

Your code will work. Change the width in the iframe to 100%.

You will need to add max-height to the code also here:

Code: Select all

.googlemap iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
max-height:400px;
}
</style>
Change the max-height to whatever you want. This will keep the map from getting infinitely bigger.

Lasa
 
 
Posts: 346
Joined: Sat Oct 06, 2018 3:08 pm

Re: Google Map responsive

Post by Lasa » Sun Mar 31, 2019 4:55 pm

Crispy68,
-grabbed the regular issued google embed code.
-In the HTML type Do not use <div>
-I changed the width to 100%
and put it all in a layer grid... seems to be working perfectly?
I could have sworn that was "one" of my zillion attempts...
Anyway it seems to be responsive on my browser and my phone.
Will keep testing. If it fails then i will add the added code.
Thanks a lot!
Been at it for a day and half!

Post Reply