good-map
A simple custom element wrapper for Google Maps JavaScript API
[ This description is mirrored from README.md at github.com/keanulee/good-map on 2019-05-10 ]
good-map
<good-map>
is a simple custom element wrapper for Google Maps JavaScript API.
Installation
Include good-map.js somewhere on your page (async
/defer
are optional):
<script src="good-map.js" async defer></script>
Alternatively, use an HTML import to include good-map.html:
<link rel="import" href="good-map.html">
Usage
Create a <good-map>
element anywhere on your page. Be sure to style the element with display: block
and give it a height. You can also specify zoom
, latitude
, longitude
, and map-options
attributes:
<style>
good-map {
display: block;
height: 400px;
}
</style>
<good-map api-key="AIzaSyAQuo91bcoB-KwWXaANroTrzpNZRFcNJ1k"
latitude="30"
longitude="-100" zoom="2"
map-options='{"mapTypeId": "satellite"}'></good-map>
Attributes on <good-map>
are used for map initialization only and are not updated when the user interacts with the map. For interactive functionality, listen for the google-map-ready
event and use goodMap.map
or event.detail
to access the underlying instance of google.maps.Map
.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- Released
- 2017-07-15
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 1.0+
- Browser
- Browser Independent