HTML 5 Bootstrap google maps

Question

HTML 5 Bootstrap google maps

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (1 votes)

2

I have a problem that the map does not load, but it's 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.br/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--><divclass="row">

        <div class="col-lg-6">
    <!--Este aqui não carrega-->    <iframe width=100% height=50% frameborder=1px src="https://www.google.com.br/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ú--><divclass="row">

        <div class="col-lg-6">
            <iframe width=100% height=50% frameborder=1px src="https://www.google.com.br/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>

Inresponsetotheluaucomment.Iusedthisexamplehere link , it works but only when he 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"asyncdefer></script>

butifIleaveitinadivusingthebootstrapitdoesnotwork.nothingappears.example:

<body><divclass="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>

html5 google-maps iframe bootstrap

asked by anonymous 22.06.2016 / 14:46

4 answers

Filtering records Difference between relational table and online record

score 1 · Answer 1

1

Try to make Google Maps API avoid using iFrame link

22.06.2016 / 14:58

score 1 · Answer 2

1

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

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

04.07.2016 / 15:57

score 1 · Answer 3

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

<div class="row">
    <div class="col-lg-6">
        <iframe width="100%" height="50%" frameborder="1px" src="http://maps.google.com.br/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><divclass="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><divclass="row">
    <div class="col-lg-6">
        <iframe width="100%" height="50%" frameborder="1px" src="https://www.google.com.br/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>

score 1 · Answer 4

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

I did this by accessing the address: https://www.google.com.br/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 Compartilhar and then Incorporar Mapa . With the generated code I have only taken the part that is inside src and it replaces the code of its src .

In short:

Get the code:

https://www.google.com.br/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 substitutes for:

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 will look like this:

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

    <div class="col-lg-6">
        <iframe width=100% height=50% frameborder=1px  src="http://maps.google.com.br/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--><divclass="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ú--><divclass="row">

    <div class="col-lg-6">
        <iframe width=100% height=50% frameborder=1px src="https://www.google.com.br/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 it working here .