This time I will share jQuery Plugin and tutorial about Easy jQuery Plugin For Manipulating Google Maps – easyGoogleMap, hope it will help you in programming stack.
easyGoogleMap is a jQuery plugin for embedding Google Maps configured by Html5 data
attributes into any web page.
How to use it:
1. Include the Google Maps JavaScript API on your web page. You will also need jQuery installed on the page. You can get a Google API key here.
2 |
< script src = "//code.jquery.com/jquery-1.11.3.min.js" ></ script > |
2. Download the plugin and include the easyGoogleMap.js
script after jQuery library.
1 |
< script src = "js/easyGoogleMap.js" ></ script > |
3. Put HTML onto the page to set the map address and marker.
1 |
< div class = "quickGoogleMap" id = "contactGoogleMap" |
2 |
data-address = "ADDRESS HERE" |
4 |
data-marker-lat = "52.440983" |
5 |
data-market-long = "-1.865927" |
4. With info window on map pin click:
1 |
< div class = "quickGoogleMap" id = "contactGoogleMap" |
2 |
data-address = "ADDRESS HERE" |
4 |
< h2 >My info window title</ h2 > |
5 |
< p >Some info window text</ p > |
5. Auto show the info window without pin click:
1 |
< div class = "quickGoogleMap" id = "contactGoogleMap" |
2 |
data-address = "ADDRESS HERE" |
3 |
data-auto-show-infowindow = "1" > |
4 |
< h2 >My inf window title</ h2 > |
5 |
< p >Some info window text</ p > |
6. All HTML5 data attributes.
data-address
: The postal data address that the map is to center on
data-show-marker
: 1 or 0. Set to determine if a map pin is to be displayed or not
data-marker-lat & data-marker-long
: If you would like the marker to go on a different location than the map address then you can define it here.
data-type
: The style of map to display. Options: ROADMAP, SATELLITE, HYBRID, TERRAIN
data-zoom
: How far to zoom in on the map. Set between 1 and 14
data-auto-show-infowindow
: 1 or 0. If you have set html for an info window popup then you can use this to display the popup right away without the need for the map pin to be clicked.
This awesome jQuery plugin is developed by scorchsoft. For more Advanced Usages, please check the demo page or visit the official website.