Embed Custom Google Maps With Ease - jQuery gMapping

Embed Custom Google Maps With Ease - jQuery gMapping
File Size: 6.96 KB
Views Total: 1243
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

gMapping is a simple, lightweight jQuery plugin used to embed customizable Google Maps in your web page, using Google Maps JavaScript API and without the need of API Key.

How to use it:

1. Import the necessary jQuery library and Google Maps JavaScript API into the html page.

<script src="//maps.googleapis.com/maps/api/js"></script>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

2. Load the minified version of the jQuery gMapping plugin after jQuery library.

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

3. Create a container element in which you want to draw the custom Google map.

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

4. The JavaScript to draw a custom Google map and pass the latitude/longitude parameters:

$('#map').gMapping(35.661289, 139.723348);

5. Change the default zoom level.

$('#map').gMapping(35.661289, 139.723348,{
  zoom: 17

6. Change the default colors of the Google map.

$('#map').gMapping(35.661289, 139.723348,{
  color: {
    hue: '#A02223',
    saturation: 50,
    lightness: 10

7. Add a custom marker to the Google map.

$('#map').gMapping(35.661289, 139.723348,{
  marker: {
    url: 'marker.png',
    size: [30, 30],
    anchor: [15, 15]

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