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">

3. Set a height to the container in your CSS.

.demo { 

4. Call the function to generate a Google Map inside the container.

  // options here

5. Specify an array of coordinates with custom markers, titles and infowindows to display on the Google Map.

  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.

  type: 'hybrid'


7. Center the map to a custom location.

  center: {
    lat: 40.7127,
    lng: -75.1890,


8. Change the zoom level of the map.

  zoom: 10


9. Make the map responsive to fit any devices.

  responsive: true


9. Callback function.


  callback: function(map, bounds, settings) {
    // console.log(map);


10. Set the Google Maps API key.


  key: 'unique_api_key'


11. Pass additional options to the Google Maps object:


  options: {}


12. API methods.

// redraw a map

// remove a map

// completely remove a map

Change log:


  • Improve loading, fix zoom issue, and refactor


  • Add optional options option


  • Make sure zoom settings preserved on map redraw


  • Fix missing API key setting


  • Fix custom markers


  • Rename resize event to avoid conflicts


  • 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.