google-map with binded api-key, combined with importHref, hides the map #342

thexs-dev · 2016-12-20T14:33:35Z

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

The text was updated successfully, but these errors were encountered:

ebidel · 2017-01-13T00:01:24Z

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 :)

thexs-dev · 2017-01-13T13:28:50Z

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?

ebidel · 2017-01-13T17:05:09Z

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.

thexs-dev · 2017-01-14T18:16:49Z

@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?

thexs-dev · 2017-02-07T13:43:12Z

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

thexs-dev · 2017-03-21T11:48:51Z

@ebidel apologies for my insistence, but still no fix for this issue?

I did a cross post on Stackoverflow, no luck there either

mrpharderwijk · 2017-05-29T15:51:04Z

@ebidel @Fausto-theXS: Got some similar error where the

is not shown. In my case I have an iron-pages which loads a template through an importHref. In that template the google-map is not shown. This is the root cause. When I load it into a template that is loaded eagerly (not with the importHref) it works fine. Maybe this helps. Still haven't found a solution to this problem...

andrewspy · 2017-09-05T11:18:45Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

google-map with binded api-key, combined with importHref, hides the map #342

google-map with binded api-key, combined with importHref, hides the map #342

thexs-dev commented Dec 20, 2016

ebidel commented Jan 13, 2017

thexs-dev commented Jan 13, 2017

ebidel commented Jan 13, 2017

thexs-dev commented Jan 14, 2017

thexs-dev commented Feb 7, 2017

thexs-dev commented Mar 21, 2017

mrpharderwijk commented May 29, 2017 •

edited

andrewspy commented Sep 5, 2017

google-map with binded api-key, combined with importHref, hides the map #342

google-map with binded api-key, combined with importHref, hides the map #342

Comments

thexs-dev commented Dec 20, 2016

ebidel commented Jan 13, 2017

thexs-dev commented Jan 13, 2017

ebidel commented Jan 13, 2017

thexs-dev commented Jan 14, 2017

thexs-dev commented Feb 7, 2017

thexs-dev commented Mar 21, 2017

mrpharderwijk commented May 29, 2017 • edited

andrewspy commented Sep 5, 2017

mrpharderwijk commented May 29, 2017 •

edited