Highly Customizable Google Maps Embed Plugin For jQuery - Mapify

Just another jQuery Google Maps Embed plugin for embedding one or multiple Google Maps to your webpage, with tons of configuration options and callback functions.

How to use it:

1. Load the needed jQuery, Google Maps JavaScript API and jQuery Mapify's core JavaScript in the document.

<script src="jquery.min.js"></script>
<script src="mapify.core.js"></script>
<script src="//maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

2. Load the OPTIONAL MarkerClustererPlus and Overlapping Marker Spiderfier libraries:

• OverlappingMarkerSpiderfier: Deals with overlapping markers in Google Maps JS API v3, Google Earth-style
• MarkerClustererPlus: The library creates and manages per-zoom-level clusters for large amounts of markers.

<script src="markerclusterer.js"></script>
<script src="oms.min.js"></script>

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

<div class="map"></div>

4. The container element must have a fixed height:

.map {
  width: 100%;
  height: 250px;
}

5. Initialize the jQuery Mapify plugin and create a basic marker on the Google Map.

$('.map').mapify({
  lat: 51.251245,
  lng: 4.497890
});

6. All default options to customize the Google Map. The following plugin options can be overridden by their data attribute counterparts. This way you can set defaults for multiple maps and override specific options per map.

<div class="map" 
     data-lat="51.251245" 
     data-lng="4.497890">
</div>

$('.map').mapify({

  markers: [], //=> a selector or array of marker objects
  lat: null,
  lng: null,
  centerLat: null,
  centerLng: null,
  label: null,
  title: null,
  backgroundColor: '#ffffff', //=> background color of the map, visible when tiles are not yet loaded

  // Possible map types: (accepts an array or comma separated string)
  // - 'roadmap'
  // - 'terrain' //=> this is actually a sub menu of roadmap
  // - 'satellite'
  // - 'hybrid' //=> this is actually a sub menu of satellite
  mapTypes: ['roadmap'],

  // Possible controls: (accepts an array or comma separated string)
  // - 'zoom'
  // - 'fullscreen'
  // - 'streetview'
  // - 'rotate'
  // - 'scale'
  // The mapTypeControl is enabled automatically if you set more than one mapType.
  controls: ['zoom'],

  // Control positioning...
  // https://developers.google.com/maps/documentation/javascript/reference#ControlPosition
  // Possible values:
  // - 'BOTTOM_CENTER'
  // - 'BOTTOM_LEFT'
  // - 'BOTTOM_RIGHT'
  // - 'LEFT_BOTTOM'
  // - 'LEFT_CENTER'
  // - 'LEFT_TOP'
  // - 'RIGHT_BOTTOM'
  // - 'RIGHT_CENTER'
  // - 'RIGHT_TOP'
  // - 'TOP_CENTER'
  // - 'TOP_LEFT'
  // - 'TOP_RIGHT'
  mapTypeControlPosition: 'TOP_LEFT',
  zoomControlPosition: 'RIGHT_BOTTOM',
  fullscreenControlPosition: 'TOP_RIGHT',
  streetviewControlPosition: 'RIGHT_BOTTOM',
  rotateControlPosition: 'RIGHT_BOTTOM',

  // Custom map styles...
  // Find premade themes on https://snazzymaps.com/
  styles: null,

  // Gesture handling...
  // - 'none':        The map cannot be panned or zoomed by user gestures.
  // - 'greedy':      All touch gestures pan or zoom the map.
  // - 'cooperative': Two-finger touch gestures pan and zoom the map.
  //                  One-finger touch gestures are not handled by the map.
  //                  In this mode, the map cooperates with the page,
  //                  so that one-finger touch gestures can pan the page.
  // - 'auto':        Gesture handling is either cooperative or greedy,
  //                  depending on whether the page is scrollable or not.
  gestures: 'cooperative',

  // Map zoom level...
  // 1: World
  // 5: Landmass/continent
  // 10: City
  // 15: Streets
  // 20: Buildings
  zoom: 15,
  scrollwheel: false, //=> zoom with the mouse scrollwheel
  fitbounds: true, //=> fit all markers on the map?
  fitboundsPadding: 50, //=> stop zooming in as soon as a markers gets in the padding zone

  icon: null, //=> a "data-icon" on a marker will override any default icon
  iconSize: null, //=> optional
  iconOrigin: null, //=> optional
  iconAnchor: null, //=> optional

  iconHover: null, //=> marker icon when hovering over it
  iconHoverSize: null, //=> optional
  iconHoverOrigin: null, //=> optional
  iconHoverAnchor: null, //=> optional

  iconOpen: null, //=> marker icon when info window is open
  iconOpenSize: null, //=> optional
  iconOpenOrigin: null, //=> optional
  iconOpenAnchor: null, //=> optional

  hoverClass: null, //=> class name that is added to a marker element on marker hover
  openClass: null, //=> class name that is added to a marker element when its info window is open

  clusters: true, //=> enable marker clustering?
  clusterTitle: '', //=> browser tooltip when hovering over a cluster icon
  clusterCenter: true, //=> position the cluster icon in the center of the markers or on the first marker
  clusterGridSize: 40, //=> the lower the grid size, the closer markers need to be to each other to be clustered
  clusterMinSize: 2, //=> the minimum number of markers needed in a cluster before a cluster appears
  clusterMaxZoom: 15, //=> stop clustering when zoomed in to this level
  clusterZoomOnClick: true,
  clusterRetina: true,
  clusterIcon: '/images/cluster.png',
  clusterIconSize: '50,50', //=> should be actual icon size or the text will be positioned wrong
  clusterTextColor: '#ffffff',
  clusterTextSize: 12,

  // Array of cluster icon styles...
  // If defined, this overrides previous cluster icon and text options.
  // Each style in the array is a ClusterIconStyle class/object.
  // Check the official documentation for more details:
  // http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/docs/reference.html
  clusterIcons: null,

  spiderfy: true, //=> enable marker spiderfier?
  spiderClick: true, //=> handle click event on a marker that triggers spiderfier

  // Add official or custom map types...
  spiderLegColors: {
      roadmap: '#444',
      terrain: '#444',
      satellite: '#fff',
      hybrid: '#fff'
  },
  spiderLegColorsHighlighted: {
      roadmap: '#f00',
      terrain: '#f00',
      satellite: '#f00',
      hybrid: '#f00'
  },

  spiderfierOptions: {
      markersWontMove: true, //=> set true for performance if markers will not be moved
      markersWontHide: false, //=> set true for performance if markers will not be hidden
      keepSpiderfied: true, //=> keep spider open when one of its markers is clicked
      ignoreMapClick: false, //=> keep spider open when the map is clicked
      nearbyDistance: 20,
      circleSpiralSwitchover: 9,
      legWeight: 2,

      // With the "onSpiderMarkerFormat" event handler you can manipulate
      // the marker based on its spider state (spiderfied/unspiderfied/...).
      //
      // Set this option to true if you only need to detect
      // the "SPIDERFIED" and (initial) "UNSPIDERFIED" state changes.
      // This will trigger the event on each affected marker when
      // it is spiderfied and unspiderfied.
      //
      // Set this option to false if you need to detect
      // the "SPIDERFIED", "SPIDERFIABLE" and "UNSPIDERFIABLE" states.
      // This will **additionally** trigger the event on every marker
      // when the map loads and zoom level changes.
      // So setting this option to true is a performance boost!
      basicFormatEvents: true
  },

  // Center marker on $marker hover/click if clustered or not in bounds...
  // Choose: 'hover', 'click', 'hover-always', 'click-always', false
  panToMarker: false,

  // Show info window and center marker on $marker hover/click if clustered or not in bounds...
  // Choose: 'hover', 'click', 'hover-always', 'click-always', false
  triggerInfoWindowOnElement: false,

  // Show info window on marker object hover/click...
  // Choose: 'hover', 'click', false
  triggerInfoWindowOnMarker: 'click',

  closeInfoWindowsOnMapClick: true,
  infoWindowMaxWidth: null,

  // The class to look for under a marker element
  // when auto detecting an info window...
  // This takes the form of $marker.find('.info-window');
  infoWindowChildSelector: '.info-window',
  
});

7. Callback functions available.

$('.map').mapify({

  // The following callbacks are available...
  // The map and marker parameters are the Google Map and Marker objects.
  // You can access the related .map and .marker DOM elements as jQuery objects
  // via the property map.$map and marker.$marker

  // function (map, markers, clusterer, spiderfier) { },
  onInitialized:             null, 

  // function (map, markers, clusterer, spiderfier, event) { },
  onMapClick:                null, 

  // function (marker, map, markers, clusterer, spiderfier, event) { },
  onMarkerClick:             null, 

  // function (marker, map, markers, clusterer, spiderfier, event) { },
  onMarkerMouseEnter:        null, 

  // function (marker, map, markers, clusterer, spiderfier, event) { },
  onMarkerMouseLeave:        null, 

  // function (marker, map, markers, clusterer, spiderfier, event) { },
  onMarkerElementClick:      null, 

  // function (marker, map, markers, clusterer, spiderfier, event) { },
  onMarkerElementMouseEnter: null, 

  // function (marker, map, markers, clusterer, spiderfier, event) { },
  onMarkerElementMouseLeave: null, 

  // function (clusterMarkers, cluster, map, markers, clusterer, spiderfier) { },
  onClusterClick:            null, 

  // function (clusterMarkers, cluster, map, markers, clusterer, spiderfier) { },
  onClusterMouseEnter:       null, 

  // function (clusterMarkers, cluster, map, markers, clusterer, spiderfier) { },
  onClusterMouseLeave:       null, 

  // function (marker, markerStatus, map, markers, clusterer, spiderfier) { }
  onSpiderMarkerFormat:      null  

});

---

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