Dynamic Google Maps Embed Plugin For jQuery - opal-gmap

File Size: 7.53 KB
Views Total: 2432
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Dynamic Google Maps Embed Plugin For jQuery - opal-gmap

The opal-gmap plugin makes it easier to embed a Google Map into the webpage, with support for custom markers, zoom levels and callback functions.

How to use it:

1. Create a container in which you want to embed your Google Maps.

<div id="map"></div>

2. Place jQuery library and the opal-gmap.js script at the bottom of the web page.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="opal-gmap.js"></script>

3. Initialize the plugin and generate a new Google Maps inside the container you created. Parameters available:

  • mapSelector: selector of map container
  • googleApiKey: your own Google Maps API key
  • centerLat: latitudes
  • centerLng: longitudes
  • zoom: zoom level
  • hasMarker: has map markers?
  • callback: callback function
// OpalGMap(mapSelector, googleApiKey, centerLat, centerLng, zoom, hasMarker, callback);
map = new OpalGMap("map", "AIzaSyCAvwUjdRCOCnaWEwKNDtOfJNfrUq9LMMg", 43.7032932, 7.1827775, 8, true, "mapLoaded");

4. Add your own map markers to the Google Map.

var mapLoaded = function() {
  // addColorMarker(lat, lng, char, hexaColor);
  map.addColorMarker(43, 7, "M", "00ffff");

  // addColorShadowMarker(lat, lng, char, hexaColor);
  map.addColorShadowMarker(43, 7.2, "s", "00ffff");

  // addCustomMarker(lat, lng, url, cX, cY);
  map.addCustomMarker(43, 7.4, "img/home.png", 30, 30);

  // map.addCustomSpriteMarker(lat, lng, url, w, h, fromX, fromY, cX, cY);
  map.addCustomSpriteMarker(43, 7.8, "img/home.png", 60, 60, 0, 0, 30, 30);


This awesome jQuery plugin is developed by JeremyZunino. For more Advanced Usages, please check the demo page or visit the official website.