🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Gmaps is a lightweight jQuery plugin that makes it easier to embed customizable Google Maps into the webpage using HTML data attributes and Google Maps JavaScript API.

Google-Maps

Documentation

jQuery Google Maps

npm version

Test on

Laravel Mix: 0.12.1

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

require('jquery-gmaps');

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


You May Also Like