🀄️🌎Google maps web component with Osagai
Web component for using google maps implemented with Osagai
npm install osagai-map
Or import from unpkg
<script type="module" src="https://unpkg.com/osagai-map/dist/osagai-map.mjs"></script>
<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>
Custom element for rendering a map using Google Maps API
-
api-key
String API key to be used on Google Maps. Get API Key docs -
version
String Version of the Google Maps API (optional, default3.34
) -
libraries
String Libraries to use on the Google Maps API, separated by "," (optional, defaultdrawing,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, defaultundefined
) -
no-auto-tilt
Boolean Don't use a tilt (optional, defaultfalse
) -
map-type
String Type of the map to use (roadmap|satellite|hybrid|terrain). mapTypes docs -
disable-default-ui
Boolean Disable default UIs (optional, defaultfalse
) -
disable-map-type-control
Boolean Disable the map type controls (optional, defaultfalse
) -
disable-street-view-control
Boolean Disable the street-view controls (optional, defaultfalse
) -
disable-zoom
Boolean Disable zoom capabilities (Double click and scroll whell) (optional, defaultfalse
) -
max-zoom
Number Max zoom allowed (optional, defaultundefined
) -
min-zoom
Number Min zoom allowed (optional, defaultundefined
)
Custom element for rendering a marker in a Google map. Marker documentation
-
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, defaultundefined
) -
animation
String Animation to exhibit dynamic movement to the marker. Values supported from google maps api. Animate marker docs (optional, defaultundefined
) -
hidden
Boolean Hide the marker (optional, defaultfalse
) -
label
String A marker label that appear inside a marker (optional, defaultundefined
)