Embed Custom Google Maps With Ease - jQuery gMapping
File Size: | 6.96 KB |
---|---|
Views Total: | 1336 |
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.