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>