good-map | Vaadin

A simple custom element wrapper for Google Maps JavaScript API

[ This description is mirrored from at on 2019-05-10 ]


<good-map> is a simple custom element wrapper for Google Maps JavaScript API.


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">


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:

good-map {
  display: block;
  height: 400px;

<good-map api-key="AIzaSyAQuo91bcoB-KwWXaANroTrzpNZRFcNJ1k"
    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 or event.detail to access the underlying instance of google.maps.Map.


Link to this version
ImportedReleased 15 July 2017MIT License
Framework Support
Polymer 1.0+
Browser Independent
Install with
bower install --save keanulee/good-map"#0.0.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.0.1