Easy Google Maps Embedding Plugin With jQuery - google-maps
File Size: | 47.4 KB |
---|---|
Views Total: | 6601 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A really small jQuery plugin which makes it easier to embed custom Google Maps into a specified container using Google Maps JavaScript API.
How to use it:
1. Place the needed jQuery library and the jQuery google-maps plugin into your html page.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/google-maps.min.js"></script>
2. Create a container for the Google Maps.
<div class="demo"> </div>
3. Set a height to the container in your CSS.
.demo { width:400px; height:300px; }
4. Call the function to generate a Google Map inside the container. Don't forget to replace the Google Maps API with your owns.
$('.demo').googleMaps({ key: 'Your API Key Here' });
5. Specify an array of coordinates with custom markers, titles and infowindows to display on the Google Map.
$('.demo').googleMaps({ points: [{ // New York lat: 40.7127, lng: -75.1890, marker: true, title: 'Marker title', infoWindow: 'Info window content', marker: 'custom.png' }] });
6. Specify the map types.
$('.demo').googleMaps({ // ROADMAP, SATELLITE, HYBRID and TERRAIN type: 'hybrid' });
7. Center the map to a custom location.
$('.demo').googleMaps({ center: { lat: 40.7127, lng: -75.1890, } });
8. Change the zoom level of the map.
$('.demo').googleMaps({ zoom: 10 });
9. Make the map responsive to fit any devices.
$('.demo').googleMaps({ responsive: true });
9. Callback function.
$('.demo').googleMaps({ callback: function(map, bounds, settings) { // console.log(map); } });
10. Set the Google Maps API key.
$('.demo').googleMaps({ key: 'unique_api_key' });
11. Pass additional options to the Google Maps object:
$('.demo').googleMaps({ options: {} });
12. API methods.
// redraw a map $('.demo').googleMaps('redraw') // remove a map $('.demo').googleMaps('remove') // completely remove a map $('.demo').googleMaps('destroy')
Changelog:
2020-07-07
- Rebrand
2019-10-29
- Code tweak
2018-03-17
- Improve loading, fix zoom issue, and refactor
2017-06-09
- Add optional options option
2016-07-28
- Make sure zoom settings preserved on map redraw
2016-07-27
- Fix missing API key setting
2016-06-16
- Fix custom markers
2016-04-29
- Rename resize event to avoid conflicts
2016-03-05
- added API methods.
This awesome jQuery plugin is developed by castlegateit. For more Advanced Usages, please check the demo page or visit the official website.