❤
npm
Sign UpSign In

jquery-gmaps

1.0.41 • Public • Published

jQuery Google Maps

npm version

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

Readme

Keywords

Package Sidebar

Install

npm i jquery-gmaps

Repository

github.com/gburgose/jquery-gmaps

Homepage

github.com/gburgose/jquery-gmaps#readme

Weekly Downloads

10

Version

1.0.41

License

MIT

Last publish

Collaborators

  • gburgose
Try on RunKit
Report malware