Не показывать карту Google с помощью Gmaps.js

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 Map Див же изображения ниже.

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

Использование высоты и 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()); 

     } 

     });