jquery faLoading on GMaps

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true&amp;.js"></script>
<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.rawgit.com/alemonteiro/jquery-fa-loading/master/jquery.faloading.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/alemonteiro/jquery-fa-loading/master/jquery.faloading.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="map"></div>

CSS

html,
body,
#map {
    display: block;
    width: 50%;
    height: 50%;
}

#map {
    background: #58B;
}

.jq-fa-loading .fa-loading-modal { z-index: 10; }
.jq-fa-loading .fa-loading-content-wrapper  { z-index: 11; }

JavaScript

var map = new GMaps({
    div: '#map',
    lat: -20.043333,
    lng: -77.028333
});

$("#map").faLoading();