Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

atom-google-map

atomicojs22ISC0.0.5

This small (1.37kB) component allows you to easily create one or more google map, All thanks to Atomico.

readme

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>