Easy Google Maps Embedding Plugin With jQuery - Mapify

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.