search

GoogleWebComponents / google-map

Google Maps web components
https://elements.polymer-project.org/elements/google-map
Other
436 stars 256 forks source link

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

Open thexs-dev opened 7 years ago

thexs-dev commented 7 years ago

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.

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

ebidel commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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

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

mrpharderwijk commented 7 years ago

@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 commented 7 years ago

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