Map - height size

Support
#1

Hi!

I’m trying to modify the height of a map (vertically long) that I inserted in a row with the map element and with the iframe code.
I tryed to modify the height of the column, the row, and the iframe code… and nothing happens.

also tryed to insert this code:

.x-map .x-map-inner {
padding-bottom: 0;
height: 200px;
}

and nothing…

how can i change the height of this map?

thanks!

#2

Hello @apxds,

Thanks for asking. :slight_smile:

Can you please share website URL for us to take a closer look?

Thanks.

#3

hi there,

Sure, i forgot

#4

Hi there,

Instead of height, you should change the bottom padding. It’s the one that defines the height.

Example,

.x-map-inner {
padding-bottom: 400%;
}

It’s recommended to maintain the responsiveness of the map instead of fixed height.

Thanks!

#5

Hi there,

thanks but it didn’t work… any other idea?

Thanks!

#6

Hello There,

How high is the map you want to display on the page? If you only want to display it 200 pixel high, please update the embed code and use this:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3603.42769709476!2d-49.27185538451799!3d-25.42396083888132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dce41137ed5d65%3A0x80500e82e0a3553f!2sAv.+C%C3%A2ndido+de+Abreu%2C+70+-+Centro+C%C3%ADvico%2C+Curitiba+-+PR!5e0!3m2!1sen!2sbr!4v1520956112467" width="600" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>

Hope this helps. Please let us know how it goes.

#7

Hey There,

Thanks, but changing the height of the the iframe code was the fist thing i did … and nothing happens.

I also tryed to modify the height of the column and the row… but did not work.

any other idea?

Thanks

#8

Hi again,

Please use this code instead:

.home .x-frame .x-frame-inner {
    padding-bottom: 50%;
}

Adjust the value as per your need. Let us know how this goes!

#9

Hey there,

now it worked!

Thanks
:slight_smile:

#10

Glad to hear it :slight_smile:

#11

Hi there,

now I’m with another website and having the same problem but the solutions above didn’t solve my problem this time…

The map is taking the full height of the screen.

Any other idea for this?

Thanks

#12

Hi There,

I have replaced your embbed map with a classic map element.

In order to get your map working as expected you need to generate an API Key.

https://developers.google.com/maps/documentation/embed/get-api-key

Hope it helps

#13

Hi There,

ok, I added the APi Key but it still doesn’t show… it says that’s something with JavaScript.

any idea?

Thanks

#14

Hi there,

Please check the API settings in https://console.developers.google.com/ and make sure that you have set the Application restrictions to HTTP referrers (web sites).

Then add this http://goldencarefisio.com.br/* to Accept requests from these HTTP referrers (web sites).

Hope this helps.

#15

Hi there,

I did that… and not working… it says that’s something with JavaScript.

any idea?

Thanks

#16

Hi there,

The error on the console says: Google Maps API warning: InvalidKey

https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key

Please double check that you have put in the correct API Key in the google map element and that there are no whitespace in the API key you supplied in the element.

Another error is: Google Maps API error: ApiNotActivatedMapError

https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error

Please double check that the API key you have generated is for the Google Map API.

#17

Hi @Jade

thanks!! working now :thumbsup:t3:

#18

You’re most welcome. :slight_smile:

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.