Google Map responsive

[Lasa]

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]

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

[Pablo]

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]

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

[Pablo]

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]

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

[Pablo]

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.

[crispy68]

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]

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!