Easy Google Maps Embedding Plugin With jQuery - Mapify

Easy Google Maps Embedding Plugin With jQuery - Mapify
File Size: 9.51 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.