Don't show Google map with Gmaps.js

Question

I want to use Google map in my we page. i used Gmaps.js for it. my code is bellow:

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

when i write bellow code, i don't see any google map div same bellow image.

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());

    }

  });

});

but when i remove that code i see this:

How must i do?

Answer 1

Use height and widthfor google map:

 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());

        }

      });