Simple jQuery Wrapper For Google Maps API V3 - jMap

File Size: 17.7 KB
Views Total: 2473
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Wrapper For Google Maps API V3 - jMap

jMap is a simple-to-use jQuery plugin that makes it easy to embed Google Maps into your website with extra functions.

How to use it:

1. Include the necessary jQuery library and Google Maps API V3 into the webpage.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maps.google.com/maps/api/js?sensor=falsen"></script>

2. Include jMap plugin after jQuery library.

<script src="src/jquery.jmap.js"></script>

3. Create an empty container for the Google Maps.

<div id="map"></div>

4. Call the plugin to embed the Google Maps into the container you just created.

$("#map").jMap({
  // OPTIONS
});

5. All the default options.

  • lat: 62.10: the default center latitude
  • lng: 10.10: the default center longitude
  • height : 350: the default height of the canvas when no css height is set, will be ignored if A/R is ture
  • centerResize: true: always keep the map center on resize
  • aspectRatio : '16/9': make sure the map keeps its aspect ratio. accepts: string 'a/r' or boolean false
  • zoom: 16: the default zoom level
  • type: 'roadmap': the map type. accepts: 'roadmap', 'terrain', 'hybrid' or 'satellite'
  • markers : null: the markers of the map
  • centerMarkers: true: if the map should be centered around markers
  • geoCenter: false: will be overridden if centerMarkers = true
  • debug: false: whether or not to show debug messages
  • beforeMapInit: null: callback before the map renders
  • afterMapInit: null: callback after the map has rendered
  • beforeMarkerAdd : null: before markers are added to the map
  • afterMarkerAdd  : null: after markers have been added to the map
  • beforeCenter: null: before center is set
  • afterCenter: null: after center is set
  • beforeGeoCenter: null: before geocenter is set
  • afterGeoCenter: null: after geocenter is set

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