不显示带有 Gmaps.js 的 Google 地图

Question

我想在我的网页中使用 Google 地图。我为此使用了 Gmaps.js。我的代码如下：

  <div class="row col-md-10 col-md-offset-1">
    <br>
    <br>
    <br>
    <label for="address">{{$MapLabel}}</label>

    <div class="span11">
        <div id="map"></div>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-md-4">
            <button id="button_Google_Serach" type="button" class="btn btn-info" >جستجو</button>
        </div>
        <div class="col-md-8">
            <input  type="text" id="address_with_google" name="address_with_google" placeholder="{{$SearchLabel}}" class="form-control" />
        </div>
    </div>
    <input type="text" hidden id="latGoogleMap">
    <input type="text" hidden id="lngGoogleMap">
    <br>
</div>

当我写下面的代码时，我没有看到任何 google 地图 div 相同的下面的图像。

var map;
$(document).ready(function(){

  map = new GMaps({
    el: '#map',
    lat: -12.043333,
    lng: -77.028333,
    zoom: 16,
    click: function(e){

      map.removeMarkers();

      map.addMarker({
        lat: e.latLng.lat(),
        lng: e.latLng.lng(),
        draggable: true
      });

      //Set google lat in hidden input
      $('#latGoogleMap').val( e.latLng.lat());
      //Set google lng in hidden input
      $('#lngGoogleMap').val(e.latLng.lng());

    }

  });

});

但是当我删除该代码时，我看到了这个：

我该怎么办？

Answer 1

使用 google 地图的高度和宽度：

 map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333,
        width: '95%',
        height: '350px',
        zoom: 16,
        click: function(e){

          map.removeMarkers();

          map.addMarker({
            lat: e.latLng.lat(),
            lng: e.latLng.lng(),
            draggable: true
          });

          //Set google lat in hidden input
          $('#latGoogleMap').val( e.latLng.lat());
          //Set google lng in hidden input
          $('#lngGoogleMap').val(e.latLng.lng());

        }

      });

不显示带有 Gmaps.js 的 Google 地图

Don't show Google map with Gmaps.js

javascript

google-maps

gmaps.js