CODEWITHSUNDEEP
javascriptjqueryhtmlcssgmaps.js
narges
narges

Reputation: 751

Put Google Map in a bootstrap modal with Gmaps.js

I want to use a gmap in a modal. I write this code:

<div class="tab-pane fade" id="third">
        <div class="row col-md-10 col-md-offset-1">
           
            <label for="Editaddress_with_google">آدرس را بر روی نقشه مشخص کنید</label>

            <div class="span11">
                <div style="top: 10px; left: 25px; width:210px; height:220px; float: left" id="EditMap">
                    <label>tttttttttttttttttt</label>
                </div>
            </div>
            <br>
            <br>
            <div class="row">
                <div class="col-md-4">
                    <button id="Editbutton_Google_Serach" type="button" class="btn btn-info" >جستجو</button>
                </div>
                <div class="col-md-8">
                    <input  type="text" id="Editaddress_with_google" name="Editaddress_with_google" placeholder="آدرس" class="form-control" />
                </div>
            </div>

            <input type="text" hidden id="EditlatGoogleMap">
            <input type="text" hidden id="EditlngGoogleMap">

            <br>
        </div>
    </div>

but when i see the web, don't show any div for map. in other hand, Width and hiegth af EditMap div was 0. same bellow image.

enter image description here

How must i do?

Upvotes: 0

Views: 247

Answers (1)

Harsh Patel
Harsh Patel

Reputation: 294

May be you need to remove hidden from your map element and also their is duplicate id for element.

Chek this:

http://www.bootply.com/106707

Upvotes: 1

Related Questions