
Mapify is 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 mapify plugin into your html page.
<script src="//code.jquery.com/jquery-1.12.1.min.js"></script> <script src="jquery.mapify.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.
$('.demo').mapify({ // options here });
5. Specify an array of coordinates with custom markers, titles and infowindows to display on the Google Map.
$('.demo').mapify({ 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').mapify({ // ROADMAP, SATELLITE, HYBRID and TERRAIN type: 'hybrid' });
7. Center the map to a custom location.
$('.demo').mapify({ center: { lat: 40.7127, lng: -75.1890, } });
8. Change the zoom level of the map.
$('.demo').mapify({ zoom: 10 });
9. Make the map responsive to fit any devices.
$('.demo').mapify({ responsive: true });
9. Callback function.
$('.demo').mapify({ callback: function(map, bounds, settings) { // console.log(map); } });
10. Set the Google Maps API key.
$('.demo').mapify({ key: 'unique_api_key' });
11. Pass additional options to the Google Maps object:
$('.demo').mapify({ options: {} });
12. API methods.
// redraw a map $('.demo').mapify('redraw') // remove a map $('.demo').mapify('remove') // completely remove a map $('.demo').mapify('destroy')
Change log:
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.
- Publication date: 17.03.2018
- Source