jQuery Plugin For Handling Google Maps On Your Website - SimpleGMaps

SimpleGMaps is a simple, cross-platform jQuery plugin for easier embedding & handling google maps on your website. Simply add the needed HTML-markup and SimpleGMaps will take care of the rest, no scripting necessary.

Key features:

• Display one or multiple map markers on your map
• Add info windows to markers with custom html markup
• Display routes on your map
• No scripting necessary
• Support for traffic layers
• Support for weather layers
• Support for automatic GEO location
• Support for bicycle route layer
• Support for custom marker icons
• Support for GEO location on demand, by clicking a button for example
• Custom InfowWindow - Position and style your own custom infowindow.

Basic usage:

1. Make sure you have jQuery JavaScript library and Google Maps JavaScript API V3 have loaded properly  in your document.

<script src="jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?key=YourApiKey&libraries=places"></script>

2. Download the plugin and include the jquery.simplegmaps.js script after jQuery.

<script src="simplegmaps.js"></script>

3. Create an element to place your Google Maps.

<div id="demo">
  ...
</div>

4. Call the function on the element you just created to render a basic Google Maps.

$('#demo').simplegmaps();

5. The plugin allows you to add custom information to the Google Maps using data-* attribute on parent container.

<div id="demo">
  <div class="map-marker" 
       data-title="Map Marker 1" 
       data-latlng="Your LAT & LNG here">
  </div>
  <div class="map-marker" 
       data-title="Map Marker 2" 
       data-address="Your Address Here">
  </div>
  <div class="map-marker" 
       data-title="Map Marker 3" 
       data-icon="Path To Your Marker Icon"
       data-address="Your Address Here">
  </div>
  <div class="map-marker" 
       data-title="Map Marker 4" 
       data-address="Your Address Here">
    <div class="map-infowindow">
      <h2>Info Window</h2>
      <p>More About The Info Window</p>
    </div>
  </div>
</div>

6. Possible options to customize your Google Maps. Zoom and center are required to render the map.

// Allows multiple info windows
multipleInfoWindows: false,

// Enables marker clustering
cluster: false,

// Path prefix to images needed for Marker Clustering
ClusterImagePathPrefix: 'img/markercluster/m',

geolocateLimit: 10,
geolocateDelay: 100,

// Active or deactive automatic geolocation.
GeoLocation: false,

// Auto zooms the map to fit all markers within bounds
ZoomToFitBounds: true,

// If set to "false". Load from HTML markup.
jsonsource: false, 

// Enables place autocomplete
AutoComplete: false,

// Autocomplete options
AutoCompleteOptions: {
  // Supported types (https://developers.google.com/places/supported_types#table3)
  types: ['geocode'],
  // Country Codes (ISO 3166-1 alpha-2): https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
  // https://developers.google.com/maps/documentation/javascript/places-autocomplete?hl=en
  componentRestrictions: {
    'country': 'se'
  },
  moveMap: false,
  setMarker: false
},

// Google Maps MapOptions
MapOptions: {
  draggable: true,
  zoom: 7,
  center: '55.604981,13.003822',
  scrollwheel: false,
  streetViewControl: false,
  panControl: true,
  zoomControl: true,
  zoomControlOptions: {
    style: 'DEFAULT'
  }
},

// Map links
iOSAppleMapLink: 'http://maps.apple.com/',
iOSGoogleMapLink: 'comgooglemaps://',
AndroidMapLink: 'https://maps.google.se/maps',
WP7MapLink: 'maps:',
DesktopMapLink: 'http://www.google.com/maps'

7. Callback functions.

$('#demo').simplegmaps({
  onInit: function () {},
  onDestroy: function () {},

  onDrawMap: function () {},

  onSearchInit: function () {},
  onSearchComplete: function () {},
  onSearchFail: function () {},

  onZoomToFitBounds: function () {},
  onPlaceChanged: function () {},

  onDirectionsInit: function () {},
  onRouteComplete: function () {},
  onRouteError: function () {},

  onJSONConnectionFail: function () {},
  onJSONLoadFail: function () {},
  onJSONLoadSuccess: function () {}
});

Changelog:

2019-09-13

• v2.4.0

---

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