jQuery Plugin For Customizable Google Maps - MapIt

The jQuery MapIt plugin makes it easier to create a highly customizable Google Map on the webpage. Supports custom latitude/longitude, zoom level, map type, map marker, routes and more.

Install the MapIt via NPM:

$ npm install jquery-mapit

Basic usage:

1. Load the necessary jQuery library and Google Maps JavaScript API as this:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?key=YOUR API KEY"></script>

2. Download and load the jQuery MapIt plugin's script after jQuery.

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

3. Create an empty container in which you want to place the Google Map.

<div id="mapContainer"></div>

4. Initialize the plugin to generate a default Google Map inside the container you just created.

$('#mapContainer').mapit();

5. To customize the Google Map, just pass the following options as an JS object to the mapit() method:

$('#mapContainer').mapit({
  latitude:    37.970996,
  longitude:   23.730542,
  zoom:        16, // zoom level
  type:        'ROADMAP', // ROADMAP, SATELLITE, HYBRID, TERRAIN
  scrollwheel: false,
  marker: { // custom markers
    latitude:   37.970996,
    longitude:  23.730542,
    icon:       '',
    title:      '',
    open:       false,
    center:     true
  },
  address:   '',
  styles:    'GRAYSCALE', // false, GRAYSCALE
  locations: [],
  origins:   []
});

6. Add an array of locations with custom map markers to your Google Map.

$('#mapContainer').mapit({
  locations: [
    [37.999252, 23.733353, 'images/marker_blue.png', 'Cinema Aello 5+1', 'Panagi Tsaldari 140, Athina, Greece', false, '1'],
    [37.976104, 23.7141811, 'images/marker_green.png', 'Benaki Museum', 'Koumpari 1, Athens, Greece', false, '2']
    ...
  ],
});

7. API methods.

// hides all markers
$('#mapContainer').trigger('hide_all')

// resets the Google Map
$('#mapContainer').trigger('reset')

---

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