0
Ich habe mein eigenes Element, das google-map und google-map-Anweisungen verwendet, wie im Beispiel here gezeigt.Google-Karte-Richtungen Polymer-Element funktioniert nicht
Hier ist mein Element:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<dom-module id="my-map">
<template>
<style>
#map-container {
height: 500px;
width: 500px;
}
</style>
<div id="map-container">
<google-map-directions map="{{map}}"
start-address="San Francisco"
end-address="Mountain View"
travel-mode="BICYCLING"
api-key="<my-key>"></google-map-directions>
<google-map map="{{map}}" latitude="37.779"
longitude="-122.3892" api-key="AIzaSyDoVR8wgBH0vUoMfhdHQ38e-hBIWk3wRbs"></google-map>
</div>
</template>
<script>
Polymer({
is: "my-map",
properties: {
fromCity: {
type: String,
value: "Green Bay, WI"
},
toCity: {
type: String,
value: "Chicago, IL"
}
},
listeners: {
"dom-change": function(e) {
console.log("Dom has changed.");
}
}
});
</script>
</dom-module>
ich dieses Element aus der Liste meiner Testseite nenne, wie folgt aus:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>my-card</title>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"> </script>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-component-page/iron-component-page.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../../sni-card.html">
<link rel="import" href="../../sni-map.html">
</head>
<body>
<style>
#map-container {
height: 500px;
width: 500px;
}
</style>
<!--iron-component-page src="sni-card.html"></iron-component-page-->
<script>
function onFromCityChanged(changedObject) {
var myMap = document.querySelector('#my-sni-map');
myMap.fromCity = changedObject.detail.value;
}
function onToCityChanged(changedObject) {
var myMap = document.querySelector('#my-sni-map');
myMap.toCity = changedObject.detail.value;
}
</script>
<my-map id="my-sni-map" from-city="[[from_city]]" to-city="[[to_city]]"></my-map>
Problem
Die Richtung wird nicht angezeigt d. Ich bekomme nur eine Karte von San Francisco. 
Frage
Wie kann ich die Richtungen auftauchen?