Minimal Google Maps Embed Plugin For jQuery - map.js

map.js is a super small jQuery plugin which automatically embeds Google Maps in the webpage and draws custom map markers & info windows from plain html structure.

How to use it:

1. Include the needed jQuery and underscore JavaScript libraries on the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/underscore-min.js"></script>

2. Download and include the jquery.map.min.js script after jQuery.

<script src="jquery.customMap.min.js"></script>

3. Add custom map markers and info windows to the webpage.

<div class="map1">
  <div class="markers">
    <div class="marker" data-lat="46.834742" data-lng="-71.297905" data-icon="" data-title="Libéo">
      <div class="marker-popup-content">
        <span class="title">Libéo</span>
        <span class="adress">5700, boul. des Galeries, Bureau 300, Québec QC G2K 0H5</span>
      </div>
    </div>
    <div class="marker" data-lat="46.834194" data-lng="-71.301401" data-icon="" data-title="Krispe kreme">
      <div class="marker-popup-content">
        <span class="title">Krispe kreme</span>
        <span class="adress">5700, boul. des Galeries, Bureau 300, Québec QC G2K 0H5</span>
      </div>
    </div>
  </div>
</div>

4. Call the function on the top container to embed a Google Map with custom markers into the webpage.

$('.map1').customMap({
  locked: true,
  htmlMarkers: false,
  hideHtmlMarkers: true,
  lat: 46.830396,
  lng: -71.300340,
  zoom: 14,
  htmlMarkers: true,
  styles: [],
  markers: [{
      lat: 46.830543,
      lng: -71.299396,
      title: 'Galeries de la Capitale',
      infoWindowContent: '<span class="title">Galeries de la Capitale</span>'
  }]
});

5. Options and defaults.

$('SELECTOR').customMap({
  locked: false,
  htmlMarkers: false,
  hideHtmlMarkers: true,
  lat: 0,
  lng: 0,
  zoom: 0,
  styles: [],
  markers: [],
  classes: {
      mapInnerWrapper: '',
      states: {
          active: 'is-active'
      }
  }
});

Change log:

v2.0.5 (2017-01-27)

• Fix 2 maps on same page error - api load

v2.0.4 (2017-01-05)

• Merge with zoom

v2.0.0 (2016-06-23)

• Change HTML markers generation

v1.1.12 (2016-06-20)

• Add option to fit bounds to markers fitCenterMarkers (true default)

v1.1.10 (2016-06-17)

• Plugin renamed to custom-map to avoid conflicts with jQuery map function

v1.1.10 (2016-06-16)

• Added the possibily to set data-icon-height and width for the icons

v1.1.8 (2016-06-15)

• Changed info window content to only div infowindowcontent

v1.0.2 (2016-04-15)

• Update customGlobalClasses default config

---

This awesome jQuery plugin is developed by libeo-vtt. For more Advanced Usages, please check the demo page or visit the official website.