将 Google 地图放入带有 Gmaps.js 的 bootstrap 模式中

Question

我想在模式中使用 gmap。我写这段代码：

<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>

但是当我浏览网页时，不显示任何 div 地图。另一方面，EditMap div 的宽度和高度为 0。下图相同。

我该怎么办？

Answer 1

可能您需要从您的地图元素中删除 hidden 并且它们是元素的重复 ID。

检查这个：

http://www.bootply.com/106707

将 Google 地图放入带有 Gmaps.js 的 bootstrap 模式中

Put Google Map in a bootstrap modal with Gmaps.js

html

javascript

css

jquery

gmaps.js