CODEWITHSUNDEEP
htmlcssgoogle-mapssafari
ste
ste

Reputation: 3259

Google maps does not open with relative height in Safari

I'm using a Vue 2 component with a google map inside for one of my project.

The component is the following: https://www.npmjs.com/package/vue2-google-maps

The component works really well in Firefox and Chrome but in Safari it doesn't show up. The problem turn out to be the relative height that I'm using to size the component:

<google-map
    :center="mapCenter"
    :zoom="mapZoomLevel"
    :options="mapOptions"
    style="width: 100%; height: 100%;"  <!-- this line ! -->
    @g-resize="resized" 
    >
</google-map>

If I put a fixed height the map works fine. The problem is that in my current layout I have a simple header and the rest of the screen is filled with the map, so right now my layout is the following:

<section style="flex: 1 0 auto; display: flex">
    <div style="display: flex; flex: 1 0 auto;">
        <div style="position: relative; flex: 1; width: auto !important; height: auto !important;">
            <google-map></google-map> <!-- with height and width set to 100% -->

You know how can I fix this?

Upvotes: 1

Views: 525

Answers (1)

ste
ste

Reputation: 3259

Solved switching from this:

style="width: 100%; height: 100%;"

to this:

style="position: absolute; top: 0; bottom: 0;"

Upvotes: 2

Related Questions