HTML 5 Bootstrap google maps

Question

HTML 5 Bootstrap google maps

Asked 8 years, 6 months ago

Viewed 2,449 times

2

I am with a problem that the map does not load certainly, but it is only the second map, the others load normally.

<!--Joinville -->
    <div class="row">

        <div class="col-lg-6">
            <iframe width=100% height=50% frameborder=1px  src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=pt-BR&amp;geocode=&amp;q=ilpea+do+brasil&amp;sll=-14.093957,-50.449219&amp;sspn=67.156049,158.027344&amp;ie=UTF8&amp;ll=-26.320537,-48.839979&amp;spn=0.009617,0.012875&amp;z=15&amp;output=embed"></iframe>        
        </div>
    </div>
<!--Jundiai -->
    <div class="row">

        <div class="col-lg-6">
    <!--Este aqui não carrega-->    <iframe width=100% height=50% frameborder=1px src="https://www.google.com/maps/place/Ilpea+do+Brasil/@-23.1857027,-46.8999944,17z/data=!3m1!4b1!4m5!3m4!1s0x94cf25b8b4e5eda9:0xe3ae249fbe54e50c!8m2!3d-23.1857076!4d-46.8978057"></iframe>

        </div>
    </div>
<!--Maracanaú -->
    <div class="row">

        <div class="col-lg-6">
            <iframe width=100% height=50% frameborder=1px src="https://www.google.com/maps?f=q&amp;source=s_q&amp;hl=pt&amp;geocode=&amp;q=Av.+Parque+Sul,+2252+-+Distrito+Industrial+I,+Maracana%C3%BA+-+CE&amp;aq=0&amp;oq=+AV.+PARQUE+SUL,+2252C+-+DISTRITO+INDUSTRIAL&amp;sll=-26.26169,-48.966474&amp;sspn=1.018484,1.349945&amp;ie=UTF8&amp;hq=&amp;hnear=Av.+Parque+Sul,+2252+-+Distrito+Industrial+I,+Maracana%C3%BA+-+Cear%C3%A1,+61939-000&amp;t=m&amp;z=14&amp;ll=-3.869618,-38.615613&amp;output=embed"></iframe>

        </div>
    </div>

</div>

In response to the comment of the glove. I used this example here https://developers.google.com/maps/documentation/javascript/examples/place-search?hl=pt-br, it works but only when it is alone. example:

  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCsu3mUlmJYTi1oww1H5KrpkpRskkLmG_E&signed_in=true&libraries=places&callback=initMap" async defer></script>

but if I leave it in a div using the bootstrap it does not work. Simply nothing appears. example:

  <body>
<div class="col-lg-6">
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCsu3mUlmJYTi1oww1H5KrpkpRskkLmG_E&signed_in=true&libraries=places&callback=initMap" async defer></script>
</div>

4 answers

Browser other questions tagged html5 google-maps iframe bootstrap

You are not signed in. Login or sign up in order to post.

by Luã Silva • 41 points · Answer 1 · 2016-06-22T12:58:23+00:00

Try to do with Google Maps API avoid using iframe https://developers.google.com/maps/web/? hl=en

by Luiz Gonçalves • **206** points · Answer 2 · 2016-07-04T13:57:58+00:00

Add ;output=embed" at the end of the iframe src.

Note that the two that work have it at the end :)

by Wendell • **1,312** points · Answer 3 · 2016-07-04T14:13:03+00:00

Your second map embed code was in error. I opened Google maps:

I did this by accessing the address: https://www.google.com/maps/place/Ilpea+do+Brasil/@-23.1857027,-46.8999944,17z/data=!3m1!4b1!4m5!3m4!1s0x94cf25b8b4e5eda9:0xe3ae249fbe54e50c!8m2!3d-23.1857076!4d-46.8978057

I clicked on Compartilhar and then in Incorporar Mapa. With the generated code I took only the part that is inside the src and replaced by the code of your src.

In short:

Take the code:

https://www.google.com/maps/place/Ilpea+do+Brasil/@-23.1857027,-46.8999944,17z/data=!3m1!4b1!4m5!3m4!1s0x94cf25b8b4e5eda9:0xe3ae249fbe54e50c!8m2!3d-23.1857076!4d-46.8978057

And replaced by:

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3667.574975563346!2d-46.8999943850292!3d-23.185707584870737!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cf25b8b4e5eda9%3A0xe3ae249fbe54e50c!2sIlpea+do+Brasil!5e0!3m2!1spt-BR!2sbr!4v1467641307151

It’ll stay that way:

<!--Joinville -->
<div class="row">

    <div class="col-lg-6">
        <iframe width=100% height=50% frameborder=1px  src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=pt-BR&amp;geocode=&amp;q=ilpea+do+brasil&amp;sll=-14.093957,-50.449219&amp;sspn=67.156049,158.027344&amp;ie=UTF8&amp;ll=-26.320537,-48.839979&amp;spn=0.009617,0.012875&amp;z=15&amp;output=embed"></iframe>        
    </div>
</div>
<!--Jundiai -->
<div class="row">

    <div class="col-lg-6">
<!--Este aqui não carrega-->    <iframe width=100% height=50% frameborder=1px src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3667.574975563346!2d-46.8999943850292!3d-23.185707584870737!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cf25b8b4e5eda9%3A0xe3ae249fbe54e50c!2sIlpea+do+Brasil!5e0!3m2!1spt-BR!2sbr!4v1467641307151"></iframe>

    </div>
</div>
<!--Maracanaú -->
<div class="row">

    <div class="col-lg-6">
        <iframe width=100% height=50% frameborder=1px src="https://www.google.com/maps?f=q&amp;source=s_q&amp;hl=pt&amp;geocode=&amp;q=Av.+Parque+Sul,+2252+-+Distrito+Industrial+I,+Maracana%C3%BA+-+CE&amp;aq=0&amp;oq=+AV.+PARQUE+SUL,+2252C+-+DISTRITO+INDUSTRIAL&amp;sll=-26.26169,-48.966474&amp;sspn=1.018484,1.349945&amp;ie=UTF8&amp;hq=&amp;hnear=Av.+Parque+Sul,+2252+-+Distrito+Industrial+I,+Maracana%C3%BA+-+Cear%C3%A1,+61939-000&amp;t=m&amp;z=14&amp;ll=-3.869618,-38.615613&amp;output=embed"></iframe>

    </div>
</div>

</div>

See working here.

by Ivan Ferrer • **12,096** points · Answer 4 · 2016-07-04T14:36:01+00:00

Click on your URL iframe, in the side menu, click the share link with blue icon in the box that opens, navigate to the "embed map" tab, grab the link from Google’s iframe and edit as below:

<div class="row">
    <div class="col-lg-6">
        <iframe width="100%" height="50%" frameborder="1px" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=pt-BR&amp;geocode=&amp;q=ilpea+do+brasil&amp;sll=-14.093957,-50.449219&amp;sspn=67.156049,158.027344&amp;ie=UTF8&amp;ll=-26.320537,-48.839979&amp;spn=0.009617,0.012875&amp;z=15&amp;output=embed" allowfullscreen></iframe>        
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <iframe width="100%" height="50%" frameborder="1px" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3667.574975563346!2d-46.8999943850292!3d-23.185707584870737!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94cf25b8b4e5eda9%3A0xe3ae249fbe54e50c!2sIlpea+do+Brasil!5e0!3m2!1spt-BR!2sbr!4v1467642838431" allowfullscreen></iframe>
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <iframe width="100%" height="50%" frameborder="1px" src="https://www.google.com/maps?f=q&amp;source=s_q&amp;hl=pt&amp;geocode=&amp;q=Av.+Parque+Sul,+2252+-+Distrito+Industrial+I,+Maracana%C3%BA+-+CE&amp;aq=0&amp;oq=+AV.+PARQUE+SUL,+2252C+-+DISTRITO+INDUSTRIAL&amp;sll=-26.26169,-48.966474&amp;sspn=1.018484,1.349945&amp;ie=UTF8&amp;hq=&amp;hnear=Av.+Parque+Sul,+2252+-+Distrito+Industrial+I,+Maracana%C3%BA+-+Cear%C3%A1,+61939-000&amp;t=m&amp;z=14&amp;ll=-3.869618,-38.615613&amp;output=embed" allowfullscreen></iframe>
    </div>
</div>