Laravel Mix: 0.12.1
jQuery gMaps is intended to reduce the time of frontend development. You can create maps customized with html attributes and some lines of javascript.
npm install jquery-gmaps --save-dev
require('jquery-gmaps');
$(document).ready(function(){
$('#map').gmaps();
});
<div data-key="[YOUR API KEY]"
data-zoom="4"
role="map"
class="gmaps">
<div
data-id="chile"
data-lat="-35.675147"
data-lng="-71.542969"
class="marker">
<div class="marker-card">
<h2>Chile</h2>
</div>
</div>
<div
data-id="argentina"
data-lat="-38.416097"
data-lng="-63.616672"
class="marker">
<div class="marker-card">
<h2>Argentina</h2>
</div>
</div>
<div
data-id="brasil"
data-lat="-14.235004"
data-lng="-51.92528"
class="marker">
<div class="marker-card">
<h2>Brasil</h2>
</div>
</div>
<div
data-id="peru"
data-lat="-9.189967"
data-lng="-75.015152"
class="marker">
<div class="marker-card">
<h2>Perú</h2>
</div>
</div>
</div>
Attribute | Type | Values | Default | Explanation |
---|---|---|---|---|
data-key | String | -- | -- | You can get your api key here. |
data-zoom | Integer | -- | 4 | Sets the initial map zoom |
data-clustering | Boolean | true or false | false | Group the map markers |
Attribute | Type | Values | Default | Explanation |
---|---|---|---|---|
data-control-zoom | Boolean | true or false | false | -- |
data-control-type | Boolean | true or false | false | -- |
data-control-scale | Boolean | true or false | false | -- |
data-control-streetview | Boolean | true or false | false | -- |
data-control-rotate | Boolean | true or false | false | -- |
data-control-fullscreen | Boolean | true or false | false | -- |
Attribute | Type | Values | Default | Explanation |
---|---|---|---|---|
data-event-draggable | Boolean | true or false | true | -- |
data-event-doubleclick | Boolean | true or false | true | -- |
data-event-mousewheel | Boolean | true or false | false | -- |
To be continued...