Can’t set the height on Google Map

  • Resolved morris373

    (@morris373)


    3 years, 8 months ago

    Hi
    How can you set the height of a Google Map?

    Top map, expands to the available page column width and the height is more than doubled.

    Side Map, again expands the available column width and the height is less that the height specified.

    Bottom Map, expands complete width of the page and the height again is more than doubled.

    Code for Bottom Map:
    I have used the shorthcode and set the height to 380px, but that value is ignored and instead the height is more than doubled. I also want the width to expand to the page width and that’s ok.

    Code in PHP template:

    <div class="row">
    <div class="col-lg-12 col-md-12">
    <?php 
        $my_shortcode = '[su_gmap width="600" height="380" address="Orange Tree Private Care, 3 Saville Dr, Sileby, Loughborough LE12 7US" zoom="10" responsive="yes"]';
        echo do_shortcode( $my_shortcode );
    ?>
    </div>
</div>

    No matter what I do the width and height is ignored. Why?

    I can set the width and height on the google map with an extra Div but that justs cuts the map to the height I want and the rest of the map overflows.

    I have set Overflow to hidden and that hides the Marker, not what I want.

    So how can we centre the map to the image, if I have forced the map to the height of the Div?

    Morris

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter morris373

    (@morris373)

    Hi
    I solved it, the height was set to 56.25% in CSS. I changed that setting to 20% and it worked.

    CSS Style Rule:

    .su-u-responsive-media-yes {
    position: relative;
    <strong>padding-bottom: 56.25%;</strong>
    height: 0;
    overflow: hidden;
}

    I added another class to the Shortcode, so that, only the bottom map was effected. If I add another map on another page then the padding will not be effected.

    [su_gmap class="responsive-window" height="380" address="Orange Tree Private Care, 3 Saville Dr, Sileby, Loughborough LE12 7US" zoom="10"]

    then added a style rule to override padding-bottom to my desired height.

    .responsive-window {
    padding-bottom: 20%!important;
}

    Morris

Viewing 1 replies (of 1 total)
  • The topic ‘Can’t set the height on Google Map’ is closed to new replies.