jQuery Custom Map Plugin

Create a simple custom Google Map with markers

Usage

1. Include jQuery and plugin dependencies:

   <script src="path/to/jquery.min.js"></script>

2. Include plugin's code:

   <script src="path/to/jquery.customMap.js"></script>

3. Prepare the HTML for the map:

    <div id="element">     <div class="markers" data-icon="" data-icon-hover="" data-icon-width="" data-icon-height="">     	<div class="marker" data-lat="46.834742" data-lng="-71.297905" data-icon="" data-icon-hover="" data-icon-width="" data-icon-height="" data-title="Libéo">             <div class="marker-popup-content">                 <span class="title">Libéo</span>                 <span class="adress">5700, boul. des Galeries, Bureau 300, Québec QC G2K 0H5</span>             </div>         </div> 	</div>  </div>

4. Call the plugin:

   $('#element').map({ 	// config });

5. Enjoy your map with markers!

Downloads

• Source
• Minified version

Configuration

The configurations options for the plugin are the following:

Whether the map is locked or not locked on hover (zoomable and dragable only on click, then locked again on mouse out)

	locked: boolean //default is false

Whether you want to add HTML markers on the map or not

    htmlMarkers: boolean //default is false

Whether you want to hide the added HTML markers or not

    hideHtmlMarkers: boolean //default is true

Adjust the center and zoom of the map so all markers are visible

    fitCenterMarkers: boolean //default is true

The latitude of the center of the map

	lat: 0

The longitude of the center of the map

    lng: 0

The zoom of the map

    zoom: 0

A JSON array of the styles you want for the map

    styles: []

An array of markers using these options:

    markers: [ 	lat: 46.830543,         lng: -71.299396,         icon: '',         iconHover: '',         iconWidth: 25,         iconHeight: 35,         title: 'Marker 1',         infoWindowContent: '<span>This is the marker 1 location</span>'     ]

History

Check Releases for detailed changelog.