Dynamic Google Maps Embed Plugin For jQuery - opal-gmap
File Size: | 7.53 KB |
---|---|
Views Total: | 2427 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.