{"id":26085281,"url":"https://github.com/codezero-be/mapify","last_synced_at":"2025-04-12T02:01:38.868Z","repository":{"id":58219593,"uuid":"91952657","full_name":"codezero-be/mapify","owner":"codezero-be","description":"Mapify - Google Maps jQuery Plugin","archived":false,"fork":false,"pushed_at":"2017-09-29T17:47:25.000Z","size":151,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T07:40:31.508Z","etag":null,"topics":["clusters","google","google-maps","javascript","jquery","map","markers","plugin","spiderfier"],"latest_commit_sha":null,"homepage":"https://codepen.io/ivanvermeyen/pen/qmLBXr","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codezero-be.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-21T11:38:08.000Z","updated_at":"2023-10-28T13:50:54.000Z","dependencies_parsed_at":"2022-08-31T16:25:34.862Z","dependency_job_id":null,"html_url":"https://github.com/codezero-be/mapify","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codezero-be%2Fmapify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codezero-be%2Fmapify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codezero-be%2Fmapify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codezero-be%2Fmapify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codezero-be","download_url":"https://codeload.github.com/codezero-be/mapify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505862,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clusters","google","google-maps","javascript","jquery","map","markers","plugin","spiderfier"],"created_at":"2025-03-09T05:58:13.374Z","updated_at":"2025-04-12T02:01:38.838Z","avatar_url":"https://github.com/codezero-be.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mapify - Google Maps jQuery Plugin\n\n[![npm](https://img.shields.io/npm/v/codezero-mapify.svg)](https://www.npmjs.com/package/codezero-mapify)\n[![npm](https://img.shields.io/npm/dt/codezero-mapify.svg)](https://www.npmjs.com/package/codezero-mapify)\n[![npm](https://img.shields.io/npm/l/codezero-mapify.svg)](https://www.npmjs.com/package/codezero-mapify)\n\n## Contents\n\n- [Third Party Libraries](#third-party-libraries)\n- [Installation](#installation)\n- [The Big Picture](#the-big-picture)\n- [Creating a Map](#creating-a-map)\n    - [Map with a Single Marker](#map-with-a-single-marker)\n    - [Map with Multiple Markers](#map-with-multiple-markers)\n- [Basic Options](#basic-options)\n    - [Map Center Position](#map-center-position)\n    - [Gesture Handling](#gesture-handling)\n    - [Zoom Level](#zoom-level)\n    - [Zoom on Scroll](#zoom-on-scroll)\n    - [Map Background Color](#map-background-color)\n    - [Map Types](#map-types)\n    - [Map Controls](#map-controls)\n    - [Map Control Positioning](#map-control-positioning)\n    - [Custom Map Styles](#custom-map-styles)\n    - [Custom Marker Icons](#custom-marker-icons)\n        - [Custom Default Icon](#custom-default-icon)\n        - [Custom Icon on Marker Hover](#custom-icon-on-marker-hover)\n        - [Custom Icon when Info Window is Open](#custom-icon-when-info-window-is-open)\n    - [Marker Label and Title](#marker-label-and-title)\n- [Fit Markers on the Map](#fit-markers-on-the-map)\n    - [Fit All Markers on the Map](#fit-all-markers-on-the-map)\n    - [Fit Specific Markers on the Map](#fit-specific-markers-on-the-map)\n    - [Fit Markers on the Map with Extra Padding](#fit-markers-on-the-map-with-extra-padding)\n- [Marker Clustering](#marker-clustering)\n- [Cluster Options](#cluster-options)\n    - [Cluster Tooltip](#cluster-tooltip)\n    - [Center Cluster Icon](#center-cluster-icon)\n    - [Cluster Grid Size](#cluster-grid-size)\n    - [Cluster Min Size](#cluster-min-size)\n    - [Cluster Max Zoom](#cluster-max-zoom)\n    - [Cluster Zoom on Click](#cluster-zoom-on-click)\n    - [Cluster Retina Icons](#cluster-retina-icons)\n    - [Cluster Icon](#cluster-icon)\n    - [Cluster Icon Size](#cluster-icon-size)\n    - [Cluster Icon Text Color](#cluster-icon-text-color)\n    - [Cluster Icon Text Size](#cluster-icon-text-size)\n    - [Multiple / Advanced Cluster Icons](#multiple-advanced-cluster-icons)\n    - [Dynamic Cluster Text, Tooltip and Icon](#dynamic-cluster-text-tooltip-and-icon)\n- [Marker Spiderfier](#marker-spiderfier)\n- [Spiderfy Options](#spiderfy-options)\n    - [Trigger Marker Click Event when Spiderfying](#trigger-marker-click-event-when-spiderfying)\n    - [Spider Leg Colors](#spider-leg-colors)\n    - [Advanced Spiderfier Options](#advanced-spiderfier-options)\n- [Auto Pan to Marker with its HTML Element](#auto-pan-to-marker-with-its-html-element)\n- [Add Class to Marker Element on Hover](#add-class-to-marker-element-on-hover)\n- [Add Class to Marker Element when Info Window is Open](#add-class-to-marker-element-when-info-window-is-open)\n- [Info Window](#info-window)\n    - [Inline Info Window](#inline-info-window)\n    - [Info Window via Selector](#info-window-via-selector)\n    - [Automatically Detect Info Window](#automatically-detect-info-window)\n    - [Single Info Window on the Map](#single-info-window-on-the-map)\n- [Info Window Options](#info-window-options)\n    - [Info Window Max Width](#info-window-max-width)\n    - [Info Window Groups](#info-window-groups)\n    - [Open Info Window on Load](#open-info-window-on-load)\n    - [Open Info Window on Click or Hover (Marker Object)](#open-info-window-on-click-or-hover-marker-object)\n    - [Open Info Window on Click or Hover (Marker Element)](#open-info-window-on-click-or-hover-marker-element)\n    - [Close Info Windows on Map Click](#close-info-windows-on-map-click)\n- [Events](#events)\n- [Development](#development)\n- [Changelog](#changelog)\n- [License](#licemse)\n\n## Third Party Libraries\n\nThis plugin requires a few 3rd party libraries to fully function.\n\n- [jQuery](https://jquery.com/)\n- [Google Maps API](https://developers.google.com/maps/)\n\nThe following packages are compiled into the main plugin version (`mapify.min.js`),\nbut if you want you can download the scripts manually and use the core plugin version (`mapify.core.min.js`) instead.\n\n- [Google Maps MarkerClustererPlus](http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/docs/reference.html)\n- [OverlappingMarkerSpiderfier](https://github.com/jawj/OverlappingMarkerSpiderfier)\n\n## Installation\n\n### Install via Bower\n\n```\nbower install codezero-mapify --save\n```\n\n### Install via NPM\n\n```\nnpm install codezero-mapify --save\n```\n\n### Use CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/codezero-mapify@1.0.1/dist/mapify.min.js\"\u003e\u003c/script\u003e\n```\n\n### Include Scripts\n\nYou probably want to [create an API key](https://developers.google.com/maps/documentation/javascript/get-api-key) to work with the Google Maps API. You can use the API without a key, but there will be a warning in the console window and I don't know what restrictions apply.\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"mapify.min.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n    function initMap() {\n        $('.map').mapify();\n    }\n\u003c/script\u003e\n\n\u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE\u0026callback=initMap\" async defer\u003e\u003c/script\u003e\n```\n\n\u003e   The `initMap` function will be called when the Google Maps script is loaded.\n\n### Apply Basic Styling\n\nMake sure your map has a width and a height.\n\n```html\n\u003cstyle\u003e\n    .map {\n        width: 100%;\n        height: 500px;\n    }\n\u003c/style\u003e\n```\n\n## The Big Picture\n\nMy goal with this plugin is to make it as easy and as powerful as you need it to be.\n\nThe map is configurable via javascript options when you invoke the plugin. These are considered your default settings for every map on your page (that falls under your `.map` selector of course).\n\n```javascript\n$('.map').mapify({\n    zoom: 8\n});\n```\n\nAlternatively you can apply the same options with data attributes on the `.map` element. These will override their javascript equivalent if both exist.\n\n```html\n\u003cdiv class=\"map\" data-zoom=\"10\"\u003e\u003c/div\u003e\n```\n\nWhat configuration strategy you choose is personal preference. However, in more advanced scenarios, using multiple maps, it could be handy to set javascript defaults and apply per map overrides with data attributes.\n\n\u003e   In any case you will need a map element and run `.mapify()` on it with jQuery. Where you put the options is up to you.\n\n## Creating a Map\n\n### Map with a Single Marker\n\nIf you only need to show one marker on a map, it couldn't be simpler:\n\n```html\n\u003cdiv class=\"map\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n    $('.map').mapify({\n        lat: 51.251245,\n        lng: 4.497890\n    });\n\u003c/script\u003e\n```\n\nThis will add a default marker on the `lat` and `lng` coordinates and center the map there.\n\nThis is the equivalent of doing:\n\n```html\n\u003cdiv class=\"map\" data-lat=\"51.251245\" data-lng=\"4.497890\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n    $('.map').mapify();\n\u003c/script\u003e\n```\n\n\u003e   The values of the data attributes will always take precedence over the javascript options!\n\n### Map with Multiple Markers\n\nCreating a map with multiple markers is basically the same as the previous example, except that you omit the `lat` and `lng` options and instead use marker objects or elements.\n\nYou can add marker objects with a javascript array:\n\n```html\n\u003cdiv class=\"map\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n    $('.map').mapify({\n        markers: [\n            { lat: 51.251245, lng: 4.497890 },\n            { lat: 50.963258, lng: 3.706874 }\n        ]\n    });\n\u003c/script\u003e\n```\n\nOr you can refer to HTML elements using any selector you want:\n\n```html\n\u003cdiv class=\"map\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n    $('.map').mapify({\n        markers: '#map-markers .marker'\n    });\n\u003c/script\u003e\n```\n\nYou can also set the marker selector with a `data-markers` attribute:\n\n```html\n\u003cdiv class=\"map\" data-markers=\"#map-markers .marker\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n    $('.map').mapify();\n\u003c/script\u003e\n```\n\n\u003e   If you set a `data-markers` attribute, but also an array in javascript, the array will be ignored.\n\nThe HTML marker elements could look like this minimal setup:\n\n```html\n\u003cul id=\"map-markers\"\u003e\n    \u003cli class=\"marker\" data-lat=\"51.251245\" data-lng=\"4.497890\"\u003eMarker A\u003c/li\u003e\n    \u003cli class=\"marker\" data-lat=\"50.963258\" data-lng=\"3.706874\"\u003eMarker B\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n\u003e   You can use any HTML structure, it doesn't have to be a `ul`. Just make sure the selector matches and your markers have the necessary data attributes.\n\n## Basic Options\n\n### Map Center Position\n\n**Default:** first marker's position\n\nWhen the `fitbounds` option is set to `false`, the map will be centered on on the first (or only) marker's `lat` and `lng` coordinates by default.\n\nYou can override the default center point in a few ways.\n\n#### By defining an explicit center position...\n\nWith javascript options:\n\n```javascript\n$('.map').mapify({\n    lat: 51.251245,\n    lng: 4.497890,\n    centerLat: 50.963258,\n    centerLng: 3.706874\n});\n```\n\nOr with data attributes to the map\n\n```html\n\u003cdiv class=\"map\"\n     data-lat=\"51.251245\"\n     data-lng=\"4.497890\"\n     data-center-lat=\"50.963258\"\n     data-center-lng=\"3.706874\"\u003e\n\u003c/div\u003e\n```\n\n\u003e   If you don't have any markers on your map, you **need** to define a center position for the map to load.\n\u003e   The data attributes will take precedence over the javascript options.\n\n#### By using a marker as the center position...\n\nOnce again you can do this with javascript:\n\n```javascript\n$('.map').mapify({\n    markers: [\n        { lat: 51.251245, lng: 4.497890 },\n        { lat: 50.963258, lng: 3.706874, center: true }\n    ]\n});\n```\n\nOr by adding a `data-center` attribute to a marker element:\n\n````html\n\u003cul id=\"map-markers\"\u003e\n    \u003cli class=\"marker\"\n        data-lat=\"51.251245\"\n        data-lng=\"4.497890\"\u003e\n        Marker A\n    \u003c/li\u003e\n    \u003cli class=\"marker\"\n        data-lat=\"50.963258\"\n        data-lng=\"3.706874\"\n        data-center=\"true\"\u003e\n        Marker B\n    \u003c/li\u003e\n\u003c/ul\u003e\n````\n\n\u003e   If you set a marker as the center point, this will take precedence over any other configuration.\n\u003e   If you set multiple markers as center, the last one will be used.\n\n### Gesture Handling\n\n**Default:** `'cooperative'`\n\nStraight from the Google Maps documentation:\n\n`'none'`: The map cannot be panned or zoomed by user gestures.\n\n`'greedy'`: All touch gestures pan or zoom the map.\n\n`'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.\n\n`'auto'`: Gesture handling is either cooperative or greedy, depending on whether the page is scrollable or not.\n\nSet one of the above values with javascript:\n\n```javascript\n$('.map').mapify({\n    gestures: 'cooperative'\n});\n```\n\nOr with a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-gestures=\"cooperative\"\u003e\u003c/div\u003e\n```\n\n### Zoom Level\n\n**Default:** `15`\n\nThe initial zoom level can be set to a value between 1 and 20, where 1 is the most zoomed out.\nThis option has no effect while the `fitbounds` option is set to `true` (see: [Fit Markers on the Map](#fit-markers-on-the-map)).\n\n- 1: World\n- 5: Landmass/continent\n- 10: City\n- 15: Streets\n- 20: Buildings\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    zoom: 8\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-zoom=\"8\"\u003e\u003c/div\u003e\n```\n\n### Zoom on Scroll\n\n**Default:** `false`\n\nTo enable zooming with the scrollwheel of the mouse, set the `scrollwheel` option to `true`.\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    scrollwheel: true\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-scrollwheel=\"true\"\u003e\u003c/div\u003e\n```\n\n### Map Background Color\n\n**Default:** `'#ffffff'`\n\nThe background color of the map that is visible when map tiles are not yet loaded.\n\nSet it via javascript:\n\n```javascript\n$('.map').mapify({\n    backgroundColor: '#ffffff'\n});\n```\n\nOr with a data attribute:\n\n````html\n\u003cdiv class=\"map\" data-background-color=\"#ffffff\"\u003e\u003c/div\u003e\n````\n\n### Map Types\n\n**Default:** `'roadmap'`\n\nThe available map types you want the user to be able to switch between.\nThis can be a comma separated string or an array.\nThe first type is the initial map type to show.\nIf you only set one type, the UI control will be hidden.\n\nAvailable map types:\n\n- `'roadmap'`\n- `'terrain'`\n- `'satellite'`\n- `'hybrid'`\n\nSet it via javascript:\n\n```javascript\n$('.map').mapify({\n    mapTypes: ['roadmap', 'satellite']\n});\n```\n\nOr with a data attribute:\n\n````html\n\u003cdiv class=\"map\" data-map-types=\"roadmap,satellite\"\u003e\u003c/div\u003e\n````\n\n### Map Controls\n\n**Default:** `'zoom'`\n\nThe UI controls you want to enable. This can be a comma separated string or an array.\nIf you want to disable all controls, set an empty string or array or just `'none'` as the value.\n\n\u003e **Note:** The `mapTypeControl` is enabled automatically if you set more than one value in the `mapTypes` option.\n\nAvailable controls:\n\n- `'zoom'`\n- `'fullscreen'`\n- `'streetview'`\n- `'rotate'`\n- `'scale'`\n\nSet it via javascript:\n\n```javascript\n$('.map').mapify({\n    controls: ['zoom', 'fullscreen']\n});\n```\n\nOr with a data attribute:\n\n````html\n\u003cdiv class=\"map\" data-controls=\"zoom,fullscreen\"\u003e\u003c/div\u003e\n````\n\n### Map Control Positioning\n\nYou can change the default position of the following controls on the map. (the shown values are the defaults)\n\nPossible values: (see [Google Maps reference](https://developers.google.com/maps/documentation/javascript/reference#ControlPosition)\n\n- `'BOTTOM_CENTER'`\n- `'BOTTOM_LEFT'`\n- `'BOTTOM_RIGHT'`\n- `'LEFT_BOTTOM'`\n- `'LEFT_CENTER'`\n- `'LEFT_TOP'`\n- `'RIGHT_BOTTOM'`\n- `'RIGHT_CENTER'`\n- `'RIGHT_TOP'`\n- `'TOP_CENTER'`\n- `'TOP_LEFT'`\n- `'TOP_RIGHT'`\n\nVia javascript:\n\n```javascript\n$('.map').mapify({\n    mapTypeControlPosition: 'TOP_LEFT',\n    zoomControlPosition: 'RIGHT_BOTTOM',\n    fullscreenControlPosition: 'TOP_RIGHT',\n    streetviewControlPosition: 'RIGHT_BOTTOM',\n    rotateControlPosition: 'RIGHT_BOTTOM'\n});\n```\n\nOr with data attributes:\n\n````html\n\u003cdiv class=\"map\"\n    data-map-type-control-positiom=\"TOP_LEFT\"\n    data-zoom-control-positiom=\"RIGHT_BOTTOM\"\n    data-fullscreen-control-positiom=\"TOP_RIGHT\"\n    data-streetview-control-positiom=\"RIGHT_BOTTOM\"\n    data-rotate-control-positiom=\"RIGHT_BOTTOM\"\u003e\n\u003c/div\u003e\n````\n\n### Custom Map Styles\n\nAn easy way to make a map blend in with the rest of your website is to create or find a theme or custom styles. One great resource for premade Google Maps themes is [SnazzyMaps](https://snazzymaps.com/). Applying one is also easy: open a theme, copy its \"javascript style array\" and set it as the value of the `styles` option.\n\nNote that for satellite/hybrid and terrain modes, these styles will only apply to labels and geometry.\n\nThis option can only be set via javascript.\n\n```javascript\n$('.map').mapify({\n    styles: /* styles array here */\n});\n```\n\n### Custom Marker Icons\n\n**Default:** standard Google icons\n\n#### Custom Default Icon\n\nTo use a custom image as a marker, set one or more of the following options:\n\n```javascript\n$('.map').mapify({\n    icon: '/path/to/marker.png',\n    iconSize: '40,40',\n    iconOrigin: '0,0',\n    iconAnchor: '0,40'\n});\n```\n\nOr use the data attributes:\n\n```html\n\u003cdiv class=\"map\"\n     data-icon=\"/path/to/marker.png\"\n     data-icon-size=\"40,40\"\n     data-icon-origin=\"0,0\"\n     data-icon-anchor=\"0,40\"\u003e\n\u003c/div\u003e\n```\n\nThe `size`, `origin` and `anchor` are optional. All three expect two numbers, separated by a comma, representing `x` and `y` coordinates relative to the icon. An origin of `0,0` means the top left corner of the icon. An anchor (where it \"points\") of `0,40` means the bottom left corner in the example.\n\nYou can further override the icon settings per marker by defining the same options on a marker.\n\nOn a marker object:\n\n```javascript\n$('.map').mapify({\n    markers: [\n        {\n            lat: 51.251245,\n            lng: 4.497890,\n            icon: '/path/to/marker.png',\n            iconSize: '40,40',\n            iconOrigin: '0,0',\n            iconAnchor: '0,40'\n        }\n    ]\n});\n```\n\nOn a marker element:\n\n````html\n\u003cul id=\"map-markers\"\u003e\n    \u003cli class=\"marker\"\n        data-lat=\"51.251245\"\n        data-lng=\"4.497890\"\n        data-icon=\"/path/to/marker.png\"\n        data-icon-size=\"40,40\"\n        data-icon-origin=\"0,0\"\n        data-icon-anchor=\"0,40\"\u003e\n        Marker A\n    \u003c/li\u003e\n\u003c/ul\u003e\n````\n\n#### Custom Icon on Marker Hover\n\nYou can specify a different marker icon to show when you hover over a marker on the map, or over a marker HTML element.\nThe idea is identical to the the previous examples, but you use the following options instead.\n\nIf you don't specify the size, origin or anchor, the default (custom) icon settings will be used.\n\nIn javascript:\n\n```\niconHover: '/path/to/marker.png',\niconHoverSize: '40,40',\niconHoverOrigin: '0,0',\niconHoverAnchor: '0,40'\n```\n\nOr use the data attributes:\n\n```\ndata-icon-hover=\"/path/to/marker.png\"\ndata-icon-hover-size=\"40,40\"\ndata-icon-hover-origin=\"0,0\"\ndata-icon-hover-anchor=\"0,40\"\u003e\n```\n\n#### Custom Icon when Info Window is Open\n\nAnd another icon can be used when a marker's info window is open.\n\nIf you don't specify the size, origin or anchor, the default (custom) icon settings will be used.\n\nIn javascript:\n\n```\niconOpen: '/path/to/marker.png',\niconOpenSize: '40,40',\niconOpenOrigin: '0,0',\niconOpenAnchor: '0,40'\n```\n\nOr use the data attributes:\n\n```\ndata-icon-open=\"/path/to/marker.png\"\ndata-icon-open-size=\"40,40\"\ndata-icon-open-origin=\"0,0\"\ndata-icon-open-anchor=\"0,40\"\u003e\n```\n\n### Marker Label and Title\n\n**Default:** none\n\nThe label is some text that is shown on a marker image. The title is a small tooltip that appears when you hover over a marker and is basically the same as a normal `title` HTML attribute.\n\nYou can set it on the marker object:\n\n```javascript\n$('.map').mapify({\n    markers: [\n        {\n            lat: 51.251245,\n            lng: 4.497890,\n            label: 'A',\n            title: 'Some more information...'\n        }\n    ]\n});\n```\n\nOr on the marker element:\n\n````html\n\u003cul id=\"map-markers\"\u003e\n    \u003cli class=\"marker\"\n        data-lat=\"51.251245\"\n        data-lng=\"4.497890\"\n        data-label=\"A\"\n        data-title=\"Some more information...\"\u003e\n        Marker A\n    \u003c/li\u003e\n\u003c/ul\u003e\n````\n\n## Fit Markers on the Map\n\n### Fit All Markers on the Map\n\n**Default:** `false` if only 1 marker, `true` if more than 1 marker\n\nMost likely you will want all of your markers to show up on the map initially. So if you add more than one marker, the `fitbounds` option is set to `true` by default. This will override any zoom level and center position you have set. If you do want to take control over this yourself, you can set `fitbounds` to `false`.\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    fitbounds: false\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-fitbounds=\"false\"\u003e\u003c/div\u003e\n```\n\nIf you only have one marker, the map will be zoomed and centered on that marker. See below for more information about those settings.\n\n### Fit Specific Markers on the Map\n\n**Default:** `true` for all markers\n\nIf you only want to zoom in on a few important markers initially, you can add a `fitbounds` option only to those markers. You don't have to disable `fitbounds` on the map, this is done automatically when the option is detected on a marker.\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    markers: [\n        { lat: 51.251245, lng: 4.497890, fitbounds: true },\n        { lat: 50.963258, lng: 3.706874, fitbounds: true }\n    ]\n});\n```\n\nWith a data attribute:\n\n````html\n\u003cul id=\"map-markers\"\u003e\n    \u003cli class=\"marker\"\n        data-lat=\"51.251245\"\n        data-lng=\"4.497890\"\n        data-fitbounds=\"true\"\u003e\n        Marker A\n    \u003c/li\u003e\n    \u003cli class=\"marker\"\n        data-lat=\"50.963258\"\n        data-lng=\"3.706874\"\n        data-fitbounds=\"true\"\u003e\n        Marker B\n    \u003c/li\u003e\n\u003c/ul\u003e\n````\n\n\u003e   **Note from Google Maps Reference:** When the map is set to `display: none`, the `fitBounds` function reads the map's size as 0x0, and therefore does not do anything. To change the viewport while the map is hidden, set the map to `visibility: hidden`, thereby ensuring the map div has an actual size.\n\n### Fit Markers on the Map with Extra Padding\n\n**Default:** `50`\n\nThe `fitboundsPadding` option is not well documented by Google, but after some experimenting it seems to work as follows… You set a pixel value that adds a \"padding zone\" to the map's boundaries. Google Maps will keep zooming in until one of your markers gets within the padding zone. This option can only be set on the map, as it doesn't make sense to set in on multiple markers.\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    fitbounds: true,\n    fitboundsPadding: 50\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-fitbounds=\"true\" data-fitbounds-padding=\"50\"\u003e\u003c/div\u003e\n```\n\n## Marker Clustering\n\n**Default:** `true` up to a zoom level of `15`\n\nWhen 2 or more markers are too close and would overlap, those markers will be replaced by a new cluster icon, showing how many markers there are in that area. Clicking the cluster will zoom in and fit its markers on the map.\n\n\u003e   Marker clustering will only work when [`markerclusterer.js`](https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/src/markerclusterer.js) is loaded. This script is already included in `mapify.min.js`.\n\nIf you don't want marker clustering, you can disable it.\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    clusters: false\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-clusters=\"false\"\u003e\u003c/div\u003e\n```\n\nBy default, when marker clustering doesn't apply (beyond the maximum zoom level or when disabled), overlapping markers will be [spiderfied](#marker-spiderfier) instead. \n\n## Cluster Options\n\nYou can set a number of cluster options **on the map**, with javascript or HTML data attributes.\n\n### Cluster Tooltip\n\n**Default:** `''` (no tooltip)\n\nShow a default browser tooltip when hovering over a cluster icon.\n\n- `clusterTitle: 'Click to see markers!'` **(JavaScript)**\n- `data-cluster-title=\"Click to see markers!\"` **(HTML)**\n\n### Center Cluster Icon\n\n**Default:** `true`\n\nPosition the cluster icon in the center of its markers if set to `true`, or on top of the first marker if set to `false`.\n\n- `clusterCenter: true` **(JavaScript)**\n- `data-cluster-center=\"true\"` **(HTML)**\n\n### Cluster Grid Size\n\n**Default:** `40`\n\nHow close markers need to be to eachother before being clustered. The lower the value, the closer the markers need to be.\n\n- `clusterGridSize: 40` **(JavaScript)**\n- `data-cluster-grid-size=\"40\"` **(HTML)**\n\n### Cluster Min Size\n\n**Default:** `2`\n\nThe minimum number of markers that should be clustered.\n\n- `clusterMinSize: 2` **(JavaScript)**\n- `data-cluster-min-size=\"2\"` **(HTML)**\n\n### Cluster Max Zoom\n\n**Default:** `15` (street level)\n\nThe maximum zoom level that markers will be clustered.\n\n- `clusterMaxZoom: 15` **(JavaScript)**\n- `data-cluster-max-zoom=\"15\"` **(HTML)**\n\n### Cluster Zoom on Click\n\n**Default:** `true`\n\nWhen you click on a cluster icon, zoom in to fit the cluster's markers on the map.\n\n-   `clusterZoomOnClick: true` **(JavaScript)**\n\n-   `data-cluster-zoom-on-click=\"true\"` **(HTML)**\n\n### Cluster Retina Icons\n\n**Default:** `true`\n\nEnable the use of retina images as a cluster icon.\n\n- `clusterRetina: true` **(JavaScript)**\n- `data-cluster-retina=\"true\"` **(HTML)**\n\nIf this is `true`, sprites cannot be used as cluster icons (advanced).\n\n### Cluster Icon\n\n**Default:** `/images/cluster.png`\n\nYou can change the default cluster icon by setting a few basic options.\n\n- `clusterIcon: '/path/to/icon.png'` **(JavaScript)**\n- `data-cluster-icon=\"/path/to/icon.png\"` **(HTML)**\n\n### Cluster Icon Size\n\n**Default:** `'50,50'`\n\nThe default width and height is `50` pixels. You must either save your image in that size, or specify the correct actual width and height of your image. The option expects a value of `'width,height'.\n\n- `clusterIconSize: '50,50'` **(JavaScript)**\n- `data-cluster-icon-size=\"50,50\"` **(HTML)**\n\n\u003e **Important Note!** If the sizes don't match the actual image sizes, the text inside the cluster will not be positioned correctly.\n\n### Cluster Icon Text Color\n\n**Default:** `'#ffffff'`\n\n- `clusterTextColor: '#ffffff'` **(JavaScript)**\n- `data-cluster-text-color=\"#ffffff\"` **(HTML)**\n\n### Cluster Icon Text Size:\n\n**Default:** `12`\n\n- `clusterTextSize: 12` **(JavaScript)**\n- `data-cluster-text-size=\"12\"` **(HTML)**\n\n### Multiple / Advanced Cluster Icons\n\nIf you set the `clusterIcons` option, you override the basic icon options with advanced settings. The option expects an array of [`ClusterIconStyle`](http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/docs/reference.html) objects. This also allows you to define multiple cluster icons. This can only be set via javascript.\n\nFor example:\n\n```javascript\n$('.map').mapify({\n    clusterIcons: [\n        {\n            // Required:\n            width: 50, //=\u003e actual image width !!!\n            height: 50, //=\u003e actual image height !!!\n            url: '/path/to/icon.png',\n            // Optional:\n            backgroundPosition: '0, 0', //=\u003e 'X, Y' (mind the space!)\n            anchorIcon: [25, 25], //=\u003e [Y,X] (defauls to center of the icon)\n            anchorText: [0, 0], //=\u003e [Y,X] (from the center of the icon)\n            textColor: '#000000',\n            textSize: 11,\n            textDecoration: 'none',\n            fontFamily: 'Arial, sans-serif',\n            fontStyle: 'normal',\n            fontWeight: 'bold'\n        },\n        {\n          \t...\n        }\n    ]\n});\n```\n\nWith the `clusterCalculator` function (see below) you can choose to show specific icons based on the markers and the number of available icons.\n\n### Dynamic Cluster Text, Tooltip and Icon\n\nUsing the `clusterCalculator` function, you can choose what text to display inside of the icon, what tooltip (title) to show on hover and which icon from the `clusterIcons` array to show, based on the cluster's markers and the number of available icons.\n\n```javascript\n$('.map').mapify({\n    clusterCalculator: function (markers, totalAvailableIcons) {\n        var index = 0,\n            title = '',\n            count = markers.length.toString();\n\n        // Your logic here...\n        \n        return {\n            text: count,\n            index: index,\n            title: title\n    \t};\n    }\n});\n```\n\nThis is the default function, taken from [markerclusterer.js](https://github.com/googlemaps/v3-utility-library/blob/master/markerclustererplus/src/markerclusterer.js), which will show the next icon in the array for every ten markers in the cluster:\n\n```javascript\nfunction (markers, totalAvailableIcons) {\n    var index = 0,\n        title = '',\n        count = markers.length.toString(),\n        dv = count;\n\n    while (dv !== 0) {\n        dv = parseInt(dv / 10, 10);\n        index++;\n    }\n\n    index = Math.min(index, totalAvailableIcons);\n\n    return {\n        text: count,\n        index: index,\n        title: title\n    };\n}\n```\n\n## Marker Spiderfier\n\n**Default:** `true`\n\nBy default, when the map is zoomed in to street level (15), markers that are too close to each other will no longer be clustered.\nInstead, the markers will be spiderfied. This will move the markers away from each other in a circular path so they can be clicked easily. \n\n\u003e   The Marker Spiderfier will only work when [OverlappingMarkerSpiderfier](https://github.com/jawj/OverlappingMarkerSpiderfier) is loaded. This script is already included in `mapify.min.js`.\n\nIf you don't want to spiderfy markers, you can disable it.\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    spiderfy: false\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-spiderfy=\"false\"\u003e\u003c/div\u003e\n```\n\n## Spiderfy Options\n\nYou can set a number of spiderfy options **on the map**, with javascript or HTML data attributes.\n\n### Trigger Marker Click Event when Spiderfying\n\n**Default:** `true`\n\nTrigger the click event on a marker even when it (un)spiderfies nearby markers.\n\n- `spiderClick: true` **(JavaScript)**\n- `data-spider-click=\"true\"` **(HTML)**\n\n### Spider Leg Colors\n\nThese options can only be set via javascript, as it would get a bit ugly with data attributes.\n\nHere are the default settings... You can also add custom map types.\n\n```javascript\n$('.map').mapify({\n    spiderLegColors: {\n        roadmap: '#444',\n        terrain: '#444',\n        satellite: '#fff',\n        hybrid: '#fff'\n    },\n    spiderLegColorsHighlighted: {\n        roadmap: '#f00',\n        terrain: '#f00',\n        satellite: '#f00',\n        hybrid: '#f00'\n    }\n});\n```\n\n## Advanced Spiderfier Options\n\nThere are some advanced options for the Spiderfier that you can set via javascript.\nThis options accepts any constructor option from [OverlappingMarkerSpiderfier](https://github.com/jawj/OverlappingMarkerSpiderfier#construction).\n\nYour options will be merged with these defaults:\n\n```javascript\n$('.map').mapify({\n    spiderfierOptions: {\n        markersWontMove: true, //=\u003e set true for performance if markers will not be moved\n        markersWontHide: false, //=\u003e set true for performance if markers will not be hidden\n        keepSpiderfied: true, //=\u003e keep spider open when one of its markers is clicked\n        ignoreMapClick: false, //=\u003e keep spider open when the map is clicked\n        nearbyDistance: 20,\n        circleSpiralSwitchover: 9,\n        legWeight: 2,\n    \n        // With the \"onSpiderMarkerFormat\" event handler you can manipulate\n        // the marker based on its spider state (spiderfied/unspiderfied/...).\n        //\n        // Set this option to true if you only need to detect\n        // the \"SPIDERFIED\" and (initial) \"UNSPIDERFIED\" state changes.\n        // This will trigger the event on each affected marker when\n        // it is spiderfied and unspiderfied.\n        //\n        // Set this option to false if you need to detect\n        // the \"SPIDERFIED\", \"SPIDERFIABLE\" and \"UNSPIDERFIABLE\" states.\n        // This will **additionally** trigger the event on every marker\n        // when the map loads and zoom level changes.\n        // So setting this option to true is a performance boost!\n        basicFormatEvents: true\n    }\n});\n```\n\n## Auto Pan to Marker with its HTML Element\n\n**Default:** `false`\n\nIf you create marker HTML elements, you can automatically pan and zoom to the related marker on the map when you click on or hover over the element.\nWhen enabled, the marker will be centered on the map and if the marker is clustered, the map will zoom in until it is unclustered.\n\nThis behavior is disabled by default, but you can configure this on the map, using these possible values..\n\nPan to marker only if it is clustered or outside the map's boundaries:\n\n- `click`\n- `hover`\n\nPan to marker even if it's within the map's boundaries:\n\n- `'hover-always'`\n- `'click-always'`\n\nDisable panning (default):\n\n-  `false`\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    panToMarker: 'click'\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-pan-to-marker=\"click\"\u003e\u003c/div\u003e\n```\n\n\u003e This option can be used in combination with opening an info window.\n\u003e See: [Open Info Window on Click or Hover (Marker Element)](#open-info-window-on-click-or-hover-marker-element).\n\n## Add Class to Marker Element on Hover\n\n**Default:** `null`\n\nWhen you create marker HTML elements, a class can be added whenever you hover over such an element or its related marker on the map.\n\nYou set this option on the map. This is disabled by default.\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    hoverClass: 'marker-hover'\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-hover-class=\"marker-hover\"\u003e\u003c/div\u003e\n```\n\n## Add Class to Marker Element when Info Window is Open\n\n**Default:** `null`\n\nIf you create marker HTML elements with info windows, a class can be added to the marker element when its info window is opened on the map.\n\nYou set this option on the map. This is disabled by default.\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    openClass: 'marker-open'\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-open-class=\"marker-open\"\u003e\u003c/div\u003e\n```\n\n## Info Window\n\n**Default:** none\n\nYou can display some text or HTML content in a dedicated info window, that pops open when you click on a marker.\n\n### Inline Info Window\n\nProbably the least attractive method is to write the HTML in a javascript string.\nThe entire HTML string will be the value of the info window.\nAn empty string will be ignored.\n\n```javascript\n$('.map').mapify({\n    markers: [\n        { lat: 51.251245, lng: 4.497890, infoWindow: '\u003cp\u003eINFO\u003c/p\u003e' }\n    ]\n});\n```\n\nYou can't really write HTML in a data attribute, but you could get away with some simple text...\nDo note that strings starting with a `.` or `#` are handled as [selectors](#info-window-via-selector). \nAs usual, the data attribute will override the javascript setting.\n\n````html\n\u003cul id=\"map-markers\"\u003e\n    \u003cli class=\"marker\"\n        data-lat=\"51.251245\"\n        data-lng=\"4.497890\"\n        data-info-window=\"Very basic info...\"\u003e\n        Marker A\n    \u003c/li\u003e\n\u003c/ul\u003e\n````\n\n### Info Window via Selector\n\nA slightly better approach is to create any `\u003cdiv\u003e` on your page and pass it with a selector.\nIf you don't want to show the info window on the page, simply hide it with CSS `display: none`.\nThe **contents** of the `\u003cdiv\u003e` will be used as the value for the info window.\nA non-existent selector will be ignored, as long as it starts with a `.` or `#`.\n\n````html\n\u003cdiv id=\"my-info-window\"\u003e\n    \u003cp\u003eINFO\u003c/p\u003e\n\u003c/div\u003e\n````\n\nVia javascript:\n\n```javascript\n$('.map').mapify({\n    markers: [\n        { lat: 51.251245, lng: 4.497890, infoWindow: '#my-info-window' }\n    ]\n});\n```\n\nOr via a data attribute:\n\n````html\n\u003cul id=\"map-markers\"\u003e\n    \u003cli class=\"marker\"\n        data-lat=\"51.251245\"\n        data-lng=\"4.497890\"\n        data-info-window=\"#my-info-window\"\u003e\n        Marker A\n    \u003c/li\u003e\n\u003c/ul\u003e\n````\n\n### Automatically Detect Info Window\n\nThe easiest way to create your info window is to add an element inside of your `.marker` and give it the `info-window` class.\nThe **contents** of the `\u003cdiv\u003e` will be used as the value for the info window.\nYou can hide the element with CSS `display: none` if you don't want to show it on your page.\n\nWe only check for this element when the previous options fail.\n\n````html\n\u003cul id=\"map-markers\"\u003e\n    \u003cli class=\"marker\" data-lat=\"51.251245\" data-lng=\"4.497890\"\u003e\n        Marker A\n        \u003cdiv class=\"info-window\"\u003e\n            \u003cp\u003eMy info window!\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n````\n\nYou can change the default selector of the child info window element via javascript.\nWe will try to `.find()` this selector under the marker element.\n\n```javascript\n$('.map').mapify({\n    infoWindowChildSelector: '.info-window'\n});\n```\n\n### Single Info Window on the Map\n\nIf you have set only one `lat` and `lng` on the map and you are not using multiple markers, you can also add the `infoWindow` option to it.\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    lat: 51.251245,\n    lng: 4.497890,\n    infoWindow: '#my-info-window'\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-lat=\"51.251245\" data-lng=\"4.497890\" data-info-window=\"#my-info-window\"\u003e\u003c/div\u003e\n```\n\n## Info Window Options\n\n### Info Window Max Width\n\n**Default:** `null` (Google Maps default)\n\nYou can set a default info window max width in pixels on the map.\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    infoWindowMaxWidth: 300\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-info-window-max-width=\"300\"\u003e\u003c/div\u003e\n```\n\nFurthermore, you can set a max width on a specific marker. This will override the default.\n\nVia javascript:\n\n```javascript\n$('.map').mapify({\n    markers: [\n        { lat: 51.251245, lng: 4.497890, infoWindowMaxWidth: 300 }\n    ]\n});\n```\n\nOr via a data attribute:\n\n````html\n\u003cul id=\"map-markers\"\u003e\n    \u003cli class=\"marker\"\n        data-lat=\"51.251245\"\n        data-lng=\"4.497890\"\n        data-info-window-max-width=\"300\"\u003e\n        Marker A\n    \u003c/li\u003e\n\u003c/ul\u003e\n````\n\n### Info Window Groups\n\n**Default:** `'default'`\n\nCreating a separate info window for many markers will degrade performance.\nSo by default we reuse a single info window instance.\nThis means you can only have one window open at the same time.\n\nIf you do need to open multiple info windows, you can assign each marker a unique info window group name.\n\nVia javascript:\n\n```javascript\n$('.map').mapify({\n    markers: [\n        { lat: 51.251245, lng: 4.497890, infoWindowGroup: 'some-group' }\n    ]\n});\n```\n\nOr via a data attribute:\n\n````html\n\u003cul id=\"map-markers\"\u003e\n    \u003cli class=\"marker\"\n        data-lat=\"51.251245\"\n        data-lng=\"4.497890\"\n        data-info-window-group=\"some-group\"\u003e\n        Marker A\n    \u003c/li\u003e\n\u003c/ul\u003e\n````\n\n### Open Info Window on Load\n\n**Default:** `false`\n\nIf you want to open an info window automatically when the page loads, you can add the `infoWindowOpen` option to its marker.\nNote that only one info window can be open at the same time per info window group.\n\nIf you set this option on more than one info window in the same group, only the first one will be opened. \n\nIf the marker is clustered and thus hidden, the info window will pop up when you uncluster the marker by clicking on the cluster icon.\n\n```javascript\n$('.map').mapify({\n    markers: [\n        { lat: 51.251245, lng: 4.497890, infoWindowOpen: true }\n    ]\n});\n```\n\nOr via a data attribute:\n\n````html\n\u003cul id=\"map-markers\"\u003e\n    \u003cli class=\"marker\"\n        data-lat=\"51.251245\"\n        data-lng=\"4.497890\"\n        data-info-window-open=\"true\"\u003e\n        Marker A\n    \u003c/li\u003e\n\u003c/ul\u003e\n````\n\n### Open Info Window on Click or Hover (Marker Object)\n\n**Default:** `'click'`\n\nBy default, when you click on a marker, its info window will pop up (if any).\nAlternatively, you can choose to show the info window when you hover over a marker instead.\n\nPossible values:\n\n- `'click'`\n- `'hover'`\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    triggerInfoWindowOnMarker: 'hover'\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-trigger-info-window-on-marker=\"hover\"\u003e\u003c/div\u003e\n```\n\n### Open Info Window on Click or Hover (Marker Element)\n\n**Default:** `false`\n\nIf you create marker HTML elements, you can choose to show an info window on the map when you click on the HTML element or hover over it.\nIf the targeted marker is outside of the map's boundaries, it will be centered on the map.\nIf it is clustered and thus not actually shown on the map, the map will zoom in until it is unclustered.\n\n\u003e This option ignores the `panToMarker` setting, but you can combine the two.\n\u003e For example: you can set `panToMarker` to `hover` and this option to `click`.\n\u003e But showing the info window on `hover` and setting `panToMarker` to `click` makes no sense at all.\n\u003e In that case you don't need to set the `panToMarker` option at all.\n\nThis option is disabled by default, but you can enable it with these possible values:\n\nPan to marker only if it is clustered or outside the map's boundaries and show the info window:\n\n- `click`\n- `hover`\n\nPan to marker even if it's within the map's boundaries and show the info window:\n\n- `'hover-always'`\n- `'click-always'`\n\nDon't show the info window (default):\n\n-  `false`\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    triggerInfoWindowOnElement: 'hover'\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-trigger-info-window-on-element=\"hover\"\u003e\u003c/div\u003e\n```\n\n### Close Info Windows on Map Click\n\n**Default:** `true`\n\nBy default, when you click anywhere on the map, all info windows will be closed.\nYou can disable this by setting this option to `false`.\nThere can still only be one info window open per info window group.\n\nWith javascript:\n\n```javascript\n$('.map').mapify({\n    closeInfoWindowsOnMapClick: false\n});\n```\n\nWith a data attribute:\n\n```html\n\u003cdiv class=\"map\" data-close-info-windows-on-map-click=\"false\"\u003e\u003c/div\u003e\n```\n\n\u003e I know... this data attribute is getting out of hand... :) But I can't shorten it AND keep it descriptive... Luckily the javascript version looks cleaner!\n\n## Events\n\nIf you need to run some extra logic when certain events occur, you can add the following callback options...\nEach callback receives a few variables with map and marker details, depending on the event.\n\n#### An overview of all possible arguments:\n\n| Argument         | Description                              |\n| ---------------- | ---------------------------------------- |\n| `map`            | The Google Maps `Map` instance           |\n| `markers`        | Array of all `Marker` instances on the map |\n| `marker`         | `Marker` instance (relevant to the event) |\n| `clusterer`      | `MarkerClusterer` instance               |\n| `cluster`        | `Cluster` instance (relevant to the event) |\n| `clusterMarkers` | Array of `Marker` instances in a cluster (relevant to the event) |\n| `spiderfier`     | `OverlappingMarkerSpiderfier` instance   |\n| `markerStatus`   | Spiderfier marker status                 |\n| `event`          | Original event                           |\n\n#### You can also get to the map or marker HTML element (if any) very easily:\n\n`map.$map`: the map div\n\n`marker.$marker`: the marker HTML element, if you created it\n\n#### These are the events you can interact with:\n\n| Event                     | Parameters                               |\n| ------------------------- | ---------------------------------------- |\n| onInitialized             | function (map, markers, clusterer, spiderfier) { } |\n| onMapClick                | function (map, markers, clusterer, spiderfier, event) { } |\n| onMarkerClick             | function (marker, map, markers, clusterer, spiderfier, event) { } |\n| onMarkerMouseEnter        | function (marker, map, markers, clusterer, spiderfier, event) { } |\n| onMarkerMouseLeave        | function (marker, map, markers, clusterer, spiderfier, event) { } |\n| onMarkerElementClick      | function (marker, map, markers, clusterer, spiderfier, event) { } |\n| onMarkerElementMouseEnter | function (marker, map, markers, clusterer, spiderfier, event) { } |\n| onMarkerElementMouseLeave | function (marker, map, markers, clusterer, spiderfier, event) { } |\n| onClusterClick            | function (clusterMarkers, cluster, map, markers, clusterer, spiderfier) { } |\n| onClusterMouseEnter       | function (clusterMarkers, cluster, map, markers, clusterer, spiderfier) { } |\n| onClusterMouseLeave       | function (clusterMarkers, cluster, map, markers, clusterer, spiderfier) { } |\n| onSpiderMarkerFormat      | function (marker, markerStatus, map, markers, clusterer, spiderfier) { } |\n\n\u003e The `onInitialized` callback is triggered when the map is fully loaded.\n\u003e If you wish to manipulate the map, markers or anything else in a way that is not supported by the plugin, this might be the place to do it.\n\n## Development\nI am using a tool called [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) to compile javascript and SCSS.\nMake sure you have the latest version of [NodeJS](https://nodejs.org/en/) installed and then run `npm install`.\n\n- To compile run `npm run dev`.\n- To compile and watch for changes run `npm run watch`.\n- To compile for production (minify/uglify) run `npm run production`.\n\n## Changelog\n\nView the [changelog](https://github.com/codezero-be/mapify/blob/master/CHANGELOG.md).\n\n## License\nThe MIT License (MIT). Please see [License File](https://github.com/codezero-be/mapify/blob/master/LICENSE.md) for more information.\n\n---\n[![Analytics](https://ga-beacon.appspot.com/UA-58876018-1/codezero-be/mapify)](https://github.com/igrigorik/ga-beacon)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodezero-be%2Fmapify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodezero-be%2Fmapify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodezero-be%2Fmapify/lists"}