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

Table of Contents

• osagai-map
  • Parameters
• osagai-map-marker
  • Parameters

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)