google-map mit gebundenem api-key, kombiniert mit importHref, verbirgt die Karte

Dies ist ein Cross-Beitrag von GitHub google-map issue #342, mit weiteren Details und um Hilfe hier bitten.google-map mit gebundenem api-key, kombiniert mit importHref, verbirgt die Karte

Ich habe ein Projekt, wo die Google Maps api-Schlüssel mit den Benutzerdaten über einen Ajax-Aufruf geladen wird, so dass ich bin mit einem dom-wenn für den api-Schlüssel wartet zur Verfügung steht, wie folgt:

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

Dieser Ansatz funktioniert gut, es sei denn, zusätzlich zu den Mapikey-Wert, das Skript auch einige ImportHref() -Aufrufe zum Laden benutzerdefinierter Code (das ist mein Fall).

Wenn eine ziemlich große Import Laden oder einfach nur ein paar von ihnen (als jsbin unten), die an Position mit #map Veränderungen verbunden CSS: relative und die Karte wird mit 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; 
}

versteckt Dies ist die jsbin code, auch für eine einfachere Überprüfung unten kopiert

Und das ist ein working Url für diesen Code.

Wenn Sie zuerst auf TEST-API klicken, sehen Sie die Karte wie erwartet.

Wenn Sie jedoch zuerst auf TEST-IMPORT klicken, erhalten Sie die Karte aufgrund der Positionsänderung für die #map, aber ausgeblendet. Überprüfen Sie das Element local-dummy> google-map> div id = "map", um die geänderte Position in thet #map element.style

p.s. Wenn ich die importHref() -Aufrufe innerhalb von setTimeout() mit 1000 ms aufrufe, verschwindet das Problem, aber das kann je nach Import fehlschlagen.

Dies ist der vollständige jsbin Code für dieses Problem reproduzieren

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

Vielen Dank im Voraus für Ihre Unterstützung, Fausto

Quelle

2017-02-07 Fausto R.

In diesem Fall, da DOM geändert zu werden, muss die Karte wie diese Größe verändert werden:

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

Beispiel

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

Quelle

2017-03-25 21:38:10

google-map mit gebundenem api-key, kombiniert mit importHref, verbirgt die Karte

Antwort

Verwandte Themen