0.0.5 • Published 6 years ago
atom-google-map v0.0.5
atom-google-map
This small (1.37kB) component allows you to easily create one or more google map, All thanks to Atomico.
<atom-google-map
center="-34.1780483,-70.7584767"
key="AIzaSyC6s6O5JqpyLo30GHGSFcEtu4hvNFjCAes">
</atom-google-map>| Props | Type | Default | Description |
|---|---|---|---|
| key | String | Required | Api_key to consume the Google Map service |
| center | String | -34.1780483,-70.7584767 | central coordinates of the map |
| markers | array | -- | allows to add marks to the map |
| autocomplete | object | -- | allows you to use an input input of directions to the map |
| fullscreen | boolean | -- | enables the use of full screen on the map |
markers
Markers is composed of an arrangement of objects, the object must have the following structure
| Props | Type | Default | Description |
|---|---|---|---|
| position | string | -34.1780483,-70.7584767 | -- |
| draggable | boolean | -- | -- |
| animation | string | DRAG | -- |
| title | string | -- | -- |
| label | string | -- | -- |
| icon | string | -- | URL |
| onclick | function | -- | -- |
| ondrag | function | -- | -- |
| ondragend | function | -- | -- |
autocomplete
| Props | Type | Default | Description |
|---|---|---|---|
| restrictions | array | -- | Google api |
| onchange | function | -- | Google api |
Installation
<body>
<atom-google-map
center="-34.1780483,-70.7584767"
key="AIzaSyC6s6O5JqpyLo30GHGSFcEtu4hvNFjCAes">
</atom-google-map>
<!-- polyfill -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- size 1.7kB -->
<script src="https://unpkg.com/atomico@0.3.3/dist/atomico.umd.js"></script>
<!-- size 1.4kB -->
<script src="https://unpkg.com/atom-google-map@0.0.3/dist/atom-google-map.umd.js"></script>
</body>