Search code examples
google-mapsgoogle-directions-api

google-map-directions polymer element not working

I created my own element that uses google-map and google-map-directions as shown in the example here.

Here is my 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>

I am calling this element from my test page, like this:

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

The direction does not get displayed. I only get a map of San Francisco. Output for the code above

Question

How can I make the directions show up?

Solution

  • In order to use google-map-directions element you need to import google-map-directions.html:

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

    Once the google-map-directions.html is imported the route will be displayed as demonstrated in the following demo