https://github.com/doishub/google-maps-viewer
Google Maps Viewer - A simple plugin to display Google Maps
https://github.com/doishub/google-maps-viewer
api geosjon google javascript maps vanilla
Last synced: 11 months ago
JSON representation
Google Maps Viewer - A simple plugin to display Google Maps
- Host: GitHub
- URL: https://github.com/doishub/google-maps-viewer
- Owner: doishub
- License: mit
- Archived: true
- Created: 2019-06-28T07:17:56.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-01-02T16:05:54.000Z (over 6 years ago)
- Last Synced: 2025-03-25T22:36:51.445Z (about 1 year ago)
- Topics: api, geosjon, google, javascript, maps, vanilla
- Language: JavaScript
- Size: 34.2 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Google Maps Viewer
A simple plugin to display Google Maps
[](https://github.com/doishub/google-maps-viewer/blob/master/LICENSE)
## How to Use
##### Google Maps Viewer has a .js file in addition to the Google Maps library and other useful Plugins.
```html
```
##### Create a container for the map
```html
```
##### Initialize a simple map
```javascript
var map = new GoogleMapsViewer('map', {
initInstant: true,
map: {
zoom: 12,
lat: 51.0968605,
lng: 5.9690903
}
});
```
## Options
##### Defaults
```javascript
{
initInstant: false,
source: {
id: 'source',
type: 'geojson',
path: false,
param: null,
},
marker: {
icon: null,
options: null
},
popup: {
showEvent: 'click',
hideEvent: false,
options: null,
propSelector: 'template',
source: {
path: false,
param: null,
loader: true,
loaderMarkup: ''
}
},
spider: {
spiderfier: false,
closePopupOnUnspiderfy: true,
format: null,
options: {
keepSpiderfied: true,
markersWontMove: true,
markersWontHide: true,
basicFormatEvents: false
}
},
cluster: {
clustering: false,
clusterSteps: null,
styles: null,
options: {
maxZoom: 14
}
},
map: {
bounds: false,
interactive: true,
mapTypeControl: false,
fullscreen: true,
streetview: true,
scrollwheel: false,
gestureHandling: 'cooperative',
style: 'roadmap',
styles: null,
zoom: 6,
minZoom: 3,
maxZoom: 16,
lat: null,
lng: null
}
}
```
## Examples
### Load Data via GEOJson
```javascript
source: {
id: 'source', // Source-ID
type: 'geojson', // Source-Type
path: 'your/geosjon/path', // Path to your GEOJson
param: { // optional Parameters
param1: 'Hello',
param2: 'World'
}
}
```
### Popups
```javascript
popup: {
showEvent: 'mouseover',
hideEvent: 'mouseleave',
options: {
... // See google documentation
}
}
```
#### Loading Popups asynchronously
If you want to load popups asynchronously, you have several options. You can load popups directly via GEOJson, or only by clicking (or any other event).
```javascript
popup: {
propSelector: 'template', // Property name to define from which field the content of a popup is read (asynchronous only)
source: {
path: 'your/popup/template/path', // Path to your HTML content
param: { // optional Parameters
param1: 'Hello',
param2: 'World'
}
loader: true, // Show a loader while loading
loaderMarkup: ''
}
}
```
##### Use placeholders to add dynamic data to the path
Sometimes it is necessary to define a separate query for each marker on the map. In order to be able to use placeholders, it is necessary to specify them using `markerProps` (Markers loaded via a GEOJson are automatically filled with the transmitted `properties`-Object).
```javascript
popup: {
source: {
path: 'your/popup/template/%id%', // Path to your HTML content with placeholder
}
}
```
In this example, the `markerProps` object must contain the field `id`. If this is not the case, the value is not replaced.
## Methods
##### Returns the Viewer-Object
```javascript
getViewer()
```
##### Add a Marker to the map
```javascript
addMarker(
latLng, // Array or google.maps.LatLng Object
htmlContent, // Popup content (optional)
markerOptions, // Passing more options for added marker (optional)
markerProps // Own marker properties (optional)
)
```