Easy Google Maps Embedding Plugin With jQuery - google-maps

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 google-maps plugin into your html page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/google-maps.min.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. Don't forget to replace the Google Maps API with your owns.

$('.demo').googleMaps({
  key: 'Your API Key Here'
});

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

$('.demo').googleMaps({
  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').googleMaps({
  
  // ROADMAP, SATELLITE, HYBRID and TERRAIN
  type: 'hybrid'

});

7. Center the map to a custom location.

$('.demo').googleMaps({
  
  center: {
    lat: 40.7127,
    lng: -75.1890,
  }

});

8. Change the zoom level of the map.

$('.demo').googleMaps({
  
  zoom: 10

});

9. Make the map responsive to fit any devices.

$('.demo').googleMaps({
  
  responsive: true

});

9. Callback function.

$('.demo').googleMaps({

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

});

10. Set the Google Maps API key.

$('.demo').googleMaps({

  key: 'unique_api_key'

});

11. Pass additional options to the Google Maps object:

$('.demo').googleMaps({

  options: {}

});

12. API methods.

// redraw a map
$('.demo').googleMaps('redraw')

// remove a map
$('.demo').googleMaps('remove')

// completely remove a map
$('.demo').googleMaps('destroy')

Changelog:

2020-07-07

• Rebrand

2019-10-29

• Code tweak

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.