Directory

← Back

good-map

A simple custom element wrapper for Google Maps JavaScript API

Author

Contributors

Rating

[ 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.

Compatibility

(Loading compatibility data...)

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

good-map - Vaadin Add-on Directory

A simple custom element wrapper for Google Maps JavaScript API good-map - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/keanulee/good-map](https://github.com//keanulee/good-map/blob/v0.0.1/README.md) on 2019-05-10 ]** # good-map `` is a simple custom element wrapper for [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/). ## Installation Include [good-map.js](good-map.js) somewhere on your page (`async`/`defer` are optional): ```html ``` Alternatively, use an HTML import to include [good-map.html](good-map.html): ```html ``` ## Usage Create a `` 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: ```html ``` Attributes on `` 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`](https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map).
Online