Lem gmaps

Installation

Include JS

<script src="jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=googleMapsOnLoad" async defer></script>
<script src="lem_gmaps.js"></script>

Set HTML
```
<div class="google-map"></div>
```

Call the plugin

window.googleMapsOnLoad = () => {
  $('.google-map').lemGmaps({
    markers: [
      {
        "lat": 44.530436,
        "lng": -103.887630
      }
    ],
  });
};

Demo

Basic usage

$('.google-map-demo-1').lemGmaps({
  markers: [
    {
      "lat": 44.530436,
      "lng": -103.887630
    }
  ],
});

Default marker

$('.google-map-demo-2').lemGmaps({
  markers: [
    {
      "lat": 44.530436,
      "lng": -103.887630
    }
 ],
  marker_icon: null
});

Multiply markers

$('.google-map-demo-3').lemGmaps({
  markers: [
    {
      "lat": 44.530436,
      "lng": -103.887630
    },
    {
      "lat": 55.170730,
      "lng": -118.819305
    }
  ]
});

Styles

$('.google-map-demo-4').lemGmaps({
  markers: [
    {
      "lat": 44.530436,
      "lng": -103.887630
    }
  ],
  map_options: {
    styles: [
      {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
          {
            "lightness": 90
          }
        ]
      }
    ]
  }
});

Settings from data attribute

<div
class="google-map-demo-5"
data-lem-gmap='{"markers": [{"lat": 46.904767, "lng": -96.797955}, {"lat": 42.163677, "lng": -72.632944, "icon": {"fillColor": "#0000ff"}}]}'>
</div>

$('.google-map-demo-5').lemGmaps();