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
Installation
<body>
<atom-google-map
center="-34.1780483,-70.7584767"
key="AIzaSyC6s6O5JqpyLo30GHGSFcEtu4hvNFjCAes">
</atom-google-map>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<script src="https://unpkg.com/atomico@0.3.3/dist/atomico.umd.js"></script>
<script src="https://unpkg.com/atom-google-map@0.0.3/dist/atom-google-map.umd.js"></script>
</body>