Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/henriquelimas/osagai-map
🀄️🌎Google maps web component with Osagai
https://github.com/henriquelimas/osagai-map
google-maps webcomponents
Last synced: about 2 months ago
JSON representation
🀄️🌎Google maps web component with Osagai
- Host: GitHub
- URL: https://github.com/henriquelimas/osagai-map
- Owner: HenriqueLimas
- Created: 2019-03-09T11:36:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-17T20:35:56.000Z (almost 6 years ago)
- Last Synced: 2024-03-25T06:11:30.621Z (10 months ago)
- Topics: google-maps, webcomponents
- Language: JavaScript
- Size: 15.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# osagai-map
🀄️🌎Google maps web component with Osagai
Web component for using google maps implemented with Osagai
## Install
```sh
npm install osagai-map
```
Or import from unpkg
```html
```
## Usage
```html
Hello, I am a marker
```
* * *
## API
#### Table of Contents
- [osagai-map](#osagai-map)
- [Parameters](#parameters)
- [osagai-map-marker](#osagai-map-marker)
- [Parameters](#parameters-1)
### osagai-map
Custom element for rendering a map using [Google Maps API](https://developers.google.com/maps/documentation/)
#### Parameters
- `api-key` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** API key to be used on Google Maps. [Get API Key docs](https://developers.google.com/maps/documentation/javascript/get-api-key)
- `version` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Version of the Google Maps API (optional, default `3.34`)
- `libraries` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Libraries to use on the Google Maps API, separated by "," (optional, default `drawing,geometry,places,visualization`)
- `latitude` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** Latitude to show in the map
- `longitude` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** Longitude to show in the map
- `zoom` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** Zoom to use in the map (optional, default `undefined`)
- `no-auto-tilt` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Don't use a tilt (optional, default `false`)
- `map-type` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Type of the map to use (roadmap|satellite|hybrid|terrain). [mapTypes docs](https://developers.google.com/maps/documentation/javascript/maptypes)
- `disable-default-ui` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Disable default UIs (optional, default `false`)
- `disable-map-type-control` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Disable the map type controls (optional, default `false`)
- `disable-street-view-control` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Disable the street-view controls (optional, default `false`)
- `disable-zoom` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Disable zoom capabilities (Double click and scroll whell) (optional, default `false`)
- `max-zoom` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** Max zoom allowed (optional, default `undefined`)
- `min-zoom` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** Min zoom allowed (optional, default `undefined`)
### osagai-map-marker
Custom element for rendering a marker in a Google map. [Marker documentation](https://developers.google.com/maps/documentation/javascript/markers)
#### Parameters
- `latitude` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** Latitude to show in the map
- `longitude` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** Longitude to show in the map
- `title` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Title of the marker that will appear as a tooltip (optional, default `undefined`)
- `animation` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Animation to exhibit dynamic movement to the marker. Values supported from google maps api. [Animate marker docs](https://developers.google.com/maps/documentation/javascript/markers#animate) (optional, default `undefined`)
- `hidden` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Hide the marker (optional, default `false`)
- `label` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** A marker label that appear inside a marker (optional, default `undefined`)