Google Polymer: paper-dialog doesn't work with google-map inside - google-maps

Question

<paper-button onclick="map.open()">Central Park</paper-button>
<paper-dialog id="map" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
<div class="dialog-map">
<h>sdoihsdf</h>
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers></google-map>
</div>
</paper-dialog>
When i include google-map into paper-dialog, second doesn't appear, but when i delete map, all works properly. If write google-map outside of this code, for example after paper-dialog, map and dialog work. Example with map inside dialog on polymer i haven't seen, please help

Answer 1

If you look in the console, you are likely getting a "missing API key" warning. You need to get an API key here:
https://developers.google.com/maps/documentation/javascript/get-api-key
Then provide your API key to your google-map component:
<google-map
api-key="[[yourApiKeyHere]]"
latitude="37.77493"
longitude="-122.41942"
fit-to-markers>
</google-map>
You might need to specify exact height/width for your google-map to make sure it's visible in the dialog:
google-map {
height: 200px;
width: 300px;
}
I was able to get a local demo working:
<dom-module id="map-dialog">
<template>
<style>
:host {
display: block;
}
google-map {
height: 200px;
width: 300px;
}
</style>
<paper-dialog id="dialog">
<google-map
api-key="[[apiKey]]"
latitude="37.77493"
longitude="-122.41942"
fit-to-markers></google-map>
<paper-dialog>
</template>
<script>
Polymer({
is: 'map-dialog',
properties: {
apiKey: {
type: String,
value: function() {
// Return your API key here!!
}
},
},
ready() {
this.$.dialog.open();
}
});
</script>
</dom-module>