Embed Custom Google Maps Into Webpage - jQuery roamiGmap

roamiGmap is an easy to use jQuery plugin that helps you embed Google Maps into the webpage, with support for custom markers, info windows, zoom levels and map options powered by Google Map Javascript API.

Install it with NPM:

$ npm install jquery.roamiGmap

How to use it:

1. Load the minified version of the jQuery roamiGmap plugin after jQuery library.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="dist/jquery.roamiGmap.min.js"></script>

2. Create a container element in which you want to place the Google Map.

<div class="roamiGmap-demo"></div>

3. Unless we make parameters global, roamiGmap requires 2 parameters: key (your Google Maps Javascript API key) and center (the center point to use for the map). The center parameter must be a string which can be an address, place, or latitude and longitude like so: '41.8339037,-87.8720447'.

$('.roamiGmap-demo').roamiGmap({
  key: '__your_API_key_here__',
  center: 'Chicago, IL'
});

4. If you want to make parameters global:

// Set default key
$.fn.roamiGmap.defaults.key = '__your_API_key_here__';

// Load all maps in Chicago
$.fn.roamiGmap.defaults.center = 'Chicago, IL';

5. All default plugin options.

• marker: Optional. Boolean value to display default marker or not. Object builds a custom marker. Defaults to true
• infowindow: Optional. Object to build infowindow for marker
• autoCloseInfowindow: Optional. Whether to close the last opened infowindow before another one is opened. Defaults to true.
• infowindows: Holds an array of infowindows added by the attachInfowindow private method. This is documented here for reference. For example you can call this variable to handle infowindows added via a search.
• zoom: Optional. Set the default zoom for the map. Defaults to 15
• minHeight: Optional. Set the min-height for the map. Defaults to 300
• bindInfowindow: Whether to bind the infowindow open and close action. If false, you can control this.
• mapOptions: all other map options that you can pass to Google Map Javascript API when creating a `new google.maps.Map(el, options)`. https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions
• onMapLoad: This is called right after tha map loads. `this` is set to the map object that just loaded. Makes it easy to do things like: `this.getMarkers()`. Useful to bind a search or other functionality that depend son the map being loaded.

$('.roamiGmap-demo').roamiGmap({
  marker         : true,
  infowindow     : {},
  autoCloseInfowindow: true,
  infowindows: false,
  key            : '',
  zoom           : 15,
  minHeight      : 300,
  bindInfowindow : true,
  mapOptions: {},
});

---

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