Easy Google Maps Embedding Plugin With jQuery - Mapify

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

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.

  • Publication date: 17.03.2018
  • Source