google-map with binded api-key, combined with importHref, hides the map
thexs-dev opened this issue · comments
I have a project where the Google Maps api-key is loaded with the user data through an ajax call, so I am using a dom-if waiting for the api-key to be available, as follow:
<template is="dom-if" if="[[mapikey]]" >
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers api-key="[[mapikey]]">
<google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
</google-map>
</template>
That approach works fine, unless in addition to set the mapikey value, the script also does some importHref() calls to load user's custom code (that's my case).
When loading a fairly large import or just a few of them (as the jsbin below), the css associated with #map changes to position:relative and the map gets hidden with height=0
This is the jsbin code, also copied below for easier review
And, this is a working Url for that code.
- If you click TEST-API first, you'd get and see the map as expected.
- However, if your click TEST-IMPORT first, you'd get the map, but hidden, due to the change in position for the #map. Inspect the element local-dummy > google-map > div id="map" to see the changed position in thet #map element.style
p.s. If I do the importHref() calls withiin a setTimeout() with 1000 ms, then the issue goes away, but that might fail depending on the imports.
This is the full jsbin code for reproducing this issue
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="paper-button/paper-button.html">
<dom-module id="local-dummy">
<style> google-map { height:600px; } </style>
<template>
<paper-button on-click="_testImport" >Test-Import</paper-button>
<paper-button on-click="_testApi" >Test-Api</paper-button>
<template is="dom-if" if="[[mapikey]]" >
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers api-key="[[mapikey]]">
<google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
</google-map>
</template>
</template>
<script>
Polymer({
is: "local-dummy",
properties: {
mapikey: { notify:true }
},
_testImport: function(){
this.mapikey = "AIzaSyCib7-e6RE0e9rTDjQDjUKDLCSfKxZ3iQ4";
this.importHref("paper-material/paper-material.html",e=>console.log(e.type),e=>console.log(e.type));
this.importHref("firebase-element/firebase-collection.html",e=>console.log(e.type),e=>console.log(e.type));
this.importHref("firebase-element/firebase-document.html",e=>console.log(e.type),e=>console.log(e.type));
},
_testApi: function(){
this.mapikey = "AIzaSyCib7-e6RE0e9rTDjQDjUKDLCSfKxZ3iQ4";
}
});
</script>
</dom-module>
</head>
<body>
<local-dummy></local-dummy>
</body>
</html>
Thanks in advance for your support, Fausto
It looks like this may be issues with older element dependencies. I've updated the list of deps and released a new version: https://github.com/GoogleWebComponents/google-map/releases/tag/1.2.0.
Can you bower install and give that a go? I was able to run your demo just by updating. No code changes :)
I am still getting the same hidden map when clicking first on the TEST-IMPORT button.
I downloaded the latest google-map element with bower, resulting as follow:
google-map#1.2.0 bower_components/google-map
├── google-apis#1.1.7
├── iron-resizable-behavior#1.0.5
├── iron-selector#1.5.2
└── polymer#1.7.1
I also tried the same jsbin pointing to:
https://polygit.org/polymer+:master/components/
to get the most recent versions, but same results
Do you have a working jsbin with this code that I can look at?
What am I missing?
I dropped http://jsbin.com/dadudagixu/edit?html,output in demo/test.html. Hitting the TEST-IMPORT button first loads the map as expected for me.
@ebidel you are a magician, but I still don't get it
In a new empty folder I run this bower, including google-map, paper-button and firebase-element, all required for the sample code
bower install --save GoogleWebComponents/firebase-element GoogleWebComponents/google-map PolymerElements/paper-button
Then, copy your sample code into google-map/demo/ but when running it, still get the same hidden map.
No idea what I am still doing wrong.
Could you help me, please?
@ebidel any update on this issue?
Please, in the sample you are running be sure the importHref elements are available and load successfully, because if not the map will show up without an issue.
p.s. I just tried with recent 1.8.0 version and still having the same issue.
@ebidel @Fausto-theXS: Got some similar error where the
I have a similar issue, where the map is not shown when the network is a bit flaky (can't be 100% certain as I only encounter the problem occasionally on mobile network). I have tried to resize() it, and restamp it using <templete is="dom-if" if restamp> with no luck.
@mrpharderwijk: May I know what do you mean by loading it "eagerly"? Does it mean loading it early in the script (such as in the app shell (i.e. my-app.html) as below:-
<link rel="import" href="../bower_components/google-map/google-map.html">