https://github.com/pagepro/easygooglemaps
https://github.com/pagepro/easygooglemaps
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/pagepro/easygooglemaps
- Owner: Pagepro
- Created: 2015-02-22T22:17:05.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-11-30T09:13:40.000Z (over 9 years ago)
- Last Synced: 2025-03-22T06:01:43.779Z (3 months ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#easyGoogleMaps
###Benefits
* You can easily add Google Maps to your website.
* Google Maps API is loaded in the background.
Warning: if you want to use it in multiple places on one page, you should include Google Maps library manually.
##Installation
###Step 1: Link plugin file
```html
```
###Step 2: Call the easyGoogleMaps
```javascript
$(document).ready(function(){
$('.map-wrap').easyGoogleMaps({
lat: 1.276816,
lng: 103.848346,
zoom: 13
});
});
```
##Configuration options
**lat**
Google Maps Latitude
```
default: '1.276816'
options: latitude
```
**lng**
Google Maps Longitude
```
default: '103.848346'
options: latitude
```
**zoom**
Google Maps Zoom
```
default: '13'
options: int
```
**randomId**
Change id attribute of map container element.
```
default: true
options: bool
```
**tooltip**
HTML of tooltip visible after clicking on map marker.
```
default: false
options: string
```
**styles**
Style array, you can get some from: http://snazzymaps.com
```
default: false
options: array
```
**draggable**
Enable touch gestures
```
default: true
options: bool
```
**disableDraggableFrom**
Disable touch gestures when window width is smaller than
```
default: false
options: int
```
**onResize**
Callback fired on window resize or orientation change event.
```
default: false
options: function (map, google){ // your code here }
```
##Alternative configuration
You can pass configuration options in data attribute of map container element:
```html
```
##Full features example
You can pass configuration options in data attribute of map container element:
```javascript
$(document).ready(function(){
$('.map-wrap').easyGoogleMaps({
lat: 1.276816,
lng: 103.848346,
zoom: 13,
randomId: true,
markerIcon: '',
tooltip: '
You`ve clicked on marker!
',
styles: [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"landscape","stylers":[{"color":"#f2e5d4"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"road"},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{},{"featureType":"road","stylers":[{"lightness":20}]}]
});
});
```