Google maps embed not zooming

Question

I have a strange problem, the google map I added to the map is zoomed out all the way and I can't find out why.

The page in question is at https://workland.ca/en/ then you go to the footer of the site and click contact. Below is the iframe I used. I tried the &z=15 with no effect.

   <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2795.9215847167884!2d-73.56997780251234!3d45.51165713370363!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4bbe13b0df%3A0xc06c2aa42d3df87c!2s51+Rue+Sherbrooke+O%2C+Montr%C3%A9al%2C+QC+H2X+1X2!5e0!3m2!1sen!2sca!4v1419350169105&z=15" 
                        style="width:100%;height:230px; border:0" frameborder="0"></iframe>

Just another detail the map works fine if I show the modal in this way,

$(function () {
      $('#modalContact').modal('show');
    })

oddly enough after the page loads and I click

 <a onclick=" $('#modalContact').modal('show')" href="#">Contact</a>

the map is zoomed out again

I found the solution iframe must be loaded after modal is shown

<script>
    $(
        function() {
            $('#modalContact').on('shown.bs.modal',
                function() {
                    $(this)
                        .find("#the_map")
                        .html(' <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2795.9215847167884!2d-73.56997780251234!3d45.51165713370363!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4bbe13b0df%3A0xc06c2aa42d3df87c!2s51+Rue+Sherbrooke+O%2C+Montr%C3%A9al%2C+QC+H2X+1X2!5e0!3m2!1sen!2sca!4v1419350169105&z=20" style="width:100%;height:230px; border:0" frameborder="0"></iframe>')
                }
            )
        }
    )
</script>

Answer 1

I find out that zoom problem raised because of iframe get loaded before bootstrap model show method call

You can solve it like follow: 1) take iframe content in variable

    <script>
    var htm ='<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2795.9215847167884!2d-73.56997780251234!3d45.51165713370363!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4bbe13b0df%3A0xc06c2aa42d3df87c!2s51+Rue+Sherbrooke+O%2C+Montr%C3%A9al%2C+QC+H2X+1X2!5e0!3m2!1sen!2sca!4v1419350169105&amp;zoom=1" style="width:100%;height:230px; border:0" frameborder="0"></iframe>';
</script>

2 ) take one div in modal-body with width and height fixed and greater than ifrmae width and height like

<div style="width:500px;height:250px;" class="container">                          
 </div>

3 ) on contact click you have to show popup first and then fill up container with iframe like :

 <a onclick=" $('#modalContact').modal('show');$('.container').html(htm);" href="#">Contact</a>

And your issue can solve.