Неправильный полимерный элемент google-map-direction

Я создал свой собственный элемент, который использует карты google-map и google-map, как показано в примере here.Неправильный полимерный элемент google-map-direction

Вот мой элемент:

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

Я называю этот элемент из моей тестовой страницы, как это:

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

Проблема

Направление не отображается д. Я получаю только карту Сан-Франциско.

Вопрос

Как я могу сделать маршрут показать?

источник

2016-11-21 user1700184

Для того, чтобы использовать google-map-directions элемент, который необходимо импортировать google-map-directions.html:

<link rel="import" href="../bower_components/google-map/google-map-directions.html">

google-map-directions.html После того, как импортируется маршрут будет отображаться как показано в следующем demo

источник

2016-11-22 00:35:27

Неправильный полимерный элемент google-map-direction

ответ

Смежные вопросы