• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Polymer Google Maps will nicht

Chronos

Chronos

Aktives Mitglied
Hi,

da das Thema Web Components und Polymer seit der I/O vergangener Woche wieder in aller Munde ist und ich das Thema sehr spannend finde, wollte ich das mal ausprobieren.

Ein sehr schönes Beispiel ist das Google-Maps-Custom-Tag http://www.polymer-project.org/ (Direkt unter dem Logo)

Kaum gesehen habe ich mir schon das Custom-Tag geladen (https://github.com/PolymerLabs/google-map) und auch das ebenso erwähnte Platform.js (https://github.com/Polymer/platform/blob/master/platform.js)

Wichtig zu beachten ist, das hier ein XMLHttpRequest stattfindet - sprich man startet das ganze dann entweder auf einem Webserver oder deaktiviert die Policy-Regel in z. B. Chrome:
chrome.exe --disable-web-security

Jedenfalls wenn ich das ganze wie folgt einbinde sehe ich einfach gar nichts, es kommt kein Fehler in der Konsole es passiert einfach nichts, wieso?

HTML: 
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Polymer gmaps gsheet</title>
        <!-- Polyfill Web Components support for older browsers -->
        <script src="./platform.js"></script>

        <!-- Import element -->
        <link rel="import" href="./google-map-master/google-map.html">
    </head>
    <body>
        <google-map lat="37.774" lng="-122.419"></google-map>
    </body>
</html>
Aufruf z. B.: http://127.0.0.1/polymer-google-map_google-sheets/polymer-gmaps-gheets.html
Das ganze läuft bei mir entweder auf einem Apache oder eben mit dem oben genannten Befehl beides nicht.
Auch per Bower heruntergeladenes geht nicht (wie hier in einem etwas erweiterten Beispiel
)
Hat jemand eine Idee was da nicht geht?

Edit: ich sehe gerade, man braucht wohl noch paar mehr Dateien, die ich aber auch über Bower installiert habe (sieht man in dem Video wie).
 
Zuletzt bearbeitet:
Edit: jau, was natürlich nirgends erwähnt wird, das man das Element dann auch noch stylen _muss_
von wegen nur Importieren und Nutzen -.-

Richtig wäre also:
HTML: 
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Polymer gmaps gsheet</title>
        <!--<script type="text/javascript" src="./js/app.js"></script>-->
        <!-- Polyfill Web Components support for older browsers -->
        <script src="./bower_components/platform/platform.js"></script>
      
        <!-- Import element -->
        <link rel="import" href="./bower_components/google-map/google-map.html">
        <style>
            body, html  {
                height: 100%;
                margin: 0;
            }
 
            google-map {
                display: block;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <google-map lat="37.774" lng="-122.419"></google-map>
    </body>
</html>

Edit:
Im Beispiel wird zwar "lat" und "lng" genutzt, funktioniert hat bei mir aber nur
"latitude" und "longitude"

Mit dem Sheets Beispiel aus dem Video habe ich auch noch zu kämpfen, das update ich dann wohl noch.
 
Zuletzt bearbeitet:
Klingt interessant. Mal abwarten, ob es sich etablieren kann und vielleicht sogar in AngularJS integriert wird.
 
Tronjer schrieb:
Klingt interessant. Mal abwarten, ob es sich etablieren kann und vielleicht sogar in AngularJS integriert wird.
Zum Vergrößern anklicken....
Ja ich finde es sehr cool, das ganz drumherum ist zwar noch etwas ungelenk für mich (ich kenne Bower noch nicht wirklich, gut was auch nicht wirklich was mit Polymer zu tun hat aber zum installieren halt recht angenehm ist. (Man benötigt node.js und wechselt dann mit der Konsole einfach in das Verzeichnis und startet die bower-Befehle, so werden dann die Verzeichnisse mit den Komponenten erstellt)) und die Beispiele sind für meinen Geschmack etwas zu allgemein aber vllt. wird da auch von einer etwas erfahreneren "Leserschaft" ausgegangen ^^.

Das mit Angular habe ich mir auch schon gedacht, dort kann ich mir ja auch eigene Custom-Tags als Template schreiben (auch sehr cool).
Viele neue Sachen zur Zeit, sehr spannend alles :)
 
Spannend mit Sicherheit, aber da jedes Jahr eine neue Sau durchs Dorf getrieben wird, sollte man eine Auswahl treffen und abwägen, was sich als Standard etablieren könnte. Es gibt Technologien, die lohnen sich nicht mehr und andere, die sich noch nicht zu erlernen lohnen. Polymer fällt in die zweite Kategorie. Es befindet sich erst im Alpha-Stadium und in näherer Zukunft wird wohl auch niemand ein Buch darüber schreiben, weil jedes Werk zum Zeitpunkt seines Erscheinens bereits veraltet wäre. Polymer und AngularJS weisen einige Gemeinsamkeiten auf. Beide verwenden Data-Binding, Custom-Tags, besitzen eine ähnliche Syntax und was auf der einen Seite Polymer-Elemente sind, nennt sich auf der anderen Direktiven. Allerdings handelt es sich bei Angular um ein komplettes Framework, während Polymer nur eine Library ist, und deswegen wird es da nicht zu einer Ablösung sondern höchstens zu einer Integration kommen.
 
Tronjer schrieb:
Spannend mit Sicherheit, aber da jedes Jahr eine neue Sau durchs Dorf getrieben wird, sollte man eine Auswahl treffen und abwägen, was sich als Standard etablieren könnte. Es gibt Technologien, die lohnen sich nicht mehr und andere, die sich noch nicht zu erlernen lohnen. Polymer fällt in die zweite Kategorie. Es befindet sich erst im Alpha-Stadium und in näherer Zukunft wird wohl auch niemand ein Buch darüber schreiben, weil jedes Werk zum Zeitpunkt seines Erscheinens bereits veraltet wäre. Polymer und AngularJS weisen einige Gemeinsamkeiten auf. Beide verwenden Data-Binding, Custom-Tags, besitzen eine ähnliche Syntax und was auf der einen Seite Polymer-Elemente sind, nennt sich auf der anderen Direktiven. Allerdings handelt es sich bei Angular um ein komplettes Framework, während Polymer nur eine Library ist, und deswegen wird es da nicht zu einer Ablösung sondern höchstens zu einer Integration kommen.
Zum Vergrößern anklicken....

Das stimmt definitiv. Hier ist aber trotzdem der Vorteil - ob einem das gefällt oder nicht (mir schon), dass da vor allem Google die treibende Kraft hinter dem ganzen ist.
Und das ist wie ich finde der entscheidende Vorteil, Mozilla macht dahingehend ja auch etwas - davon redet allerdings niemand, ich hab es mal gehört, es nennt sich glaube "Brick"?

Egal, weiterhin sehe ich da viel Potential da wie gesagt auch Google das bereits überall einsetzt, Angular im schon jetzt in Anwendungen (ich finde den Artikel leider nicht mehr) und Polymer jetzt zunehmend durch Android. Gerade da zu mindestens mir Google in seiner Designsprache (endlich) mal fokussierter wirkt, stehen da die Chancen gut.

Alpha ist so eine Sache, ich würde halt sagen es nutzen vergleichsweise noch nicht viele, es macht aber Fun und ist nicht verkehrt es im Auge zu bleiben, mal wie ich etwas auszuprobieren. Jetzt im speziellen ist Polymer mir noch zugänglicher als Angular, von MVW habe ich (noch) keine Ahnung, aber es wird - step by step.

Ist nur meine Sichtweise über das was ich da bisher sehen konnte, wie es sich entwickelt sehen wir dann.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben