jquery-gmaps
1.0.41 • Public • Published jQuery Google Maps
What is jquery gMaps?
jQuery gMaps is intended to reduce the time of frontend development. You can create maps customized with html attributes and some lines of javascript.
Installation
npm
npm install jquery-gmaps --save-dev
Webpack
jQuery
$(document).ready(function(){
$('#map').gmaps();
});
HTML
<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>
Map settings
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 |
Map controls
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 |
-- |
Map events
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...
Package Sidebar
Install
Weekly Downloads