Search code examples
google-mapspolymergoogle-web-component

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

This is a cross post from GitHub google-map issue #342, with more details and asking for help here.

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

element.style {
    position: relative;
    overflow: hidden;
}

<style>…</style>
#map.google-map {
    position: absolute; <-- overwritten by element.style relative above
    top: 0;
    right: 0;
    bottom: 0;
    left: 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

Solution

  • In that case since DOM is getting changed, map needs to be resized like this:

    HTMLImports.whenReady(function () {
   document.getElementById("map").style.height = "600px"; //ensure map container height
   var map = document.querySelector('google-map');
   map.resize();         
});

    Example

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

  <style>

  </style>

  <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>
          <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 = "--KEY GOES HERE--";
          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));

          HTMLImports.whenReady(function () {
            var map = document.querySelector('google-map');
            document.getElementById("map").style.height = "600px";
            map.resize();
            
            console.log("resized");
          });
        },
        _testApi: function () {
          this.mapikey = "--KEY GOES HERE--";
        }
      });
    </script>
  </dom-module>
</head>
<body>
  <local-dummy></local-dummy>
</body>
</html>