Osagai-map NPM

osagai-map

🀄️🌎Google maps web component with Osagai

Web component for using google maps implemented with Osagai

Install

npm install osagai-map

Or import from unpkg

<script type="module" src="https://unpkg.com/osagai-map/dist/osagai-map.mjs"></script>

Usage

<osagai-map
  api-key="<GOOGLE_MAPS_API_KEY>"
  latitude="37.4029937"
  longitude="-122.1811813"
  zoom="13">
    <osagai-map-marker latitude="37.4029937" longitude="-122.1811813">
      Hello, I am a marker
    </osagai-map-marker>
</osagai-map>

API

osagai-map

Custom element for rendering a map using Google Maps API

Parameters

api-key String API key to be used on Google Maps. Get API Key docs
version String Version of the Google Maps API (optional, default 3.34)
libraries String Libraries to use on the Google Maps API, separated by "," (optional, default drawing,geometry,places,visualization)
latitude Number Latitude to show in the map
longitude Number Longitude to show in the map
zoom Number Zoom to use in the map (optional, default undefined)
no-auto-tilt Boolean Don't use a tilt (optional, default false)
map-type String Type of the map to use (roadmap|satellite|hybrid|terrain). mapTypes docs
disable-default-ui Boolean Disable default UIs (optional, default false)
disable-map-type-control Boolean Disable the map type controls (optional, default false)
disable-street-view-control Boolean Disable the street-view controls (optional, default false)
disable-zoom Boolean Disable zoom capabilities (Double click and scroll whell) (optional, default false)
max-zoom Number Max zoom allowed (optional, default undefined)
min-zoom Number Min zoom allowed (optional, default undefined)

osagai-map-marker

Custom element for rendering a marker in a Google map. Marker documentation

Parameters

latitude Number Latitude to show in the map
longitude Number Longitude to show in the map
title String Title of the marker that will appear as a tooltip (optional, default undefined)
animation String Animation to exhibit dynamic movement to the marker. Values supported from google maps api. Animate marker docs (optional, default undefined)
hidden Boolean Hide the marker (optional, default false)
label String A marker label that appear inside a marker (optional, default undefined)