Giters

GoogleWebComponents / google-map

Google Maps web components

Home Page:https://elements.polymer-project.org/elements/google-map

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unclear how to add Traffic, Transit and Bicycling Layers

esd100 opened this issue · comments

commented

No documentation on how to add Traffic, Transit and Bicycling Layers

commented

okay, that takes care of 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT', but what about 'TRAFFIC'?

commented

Where is that defined in the Maps API?

commented

Once the element is defined, you can add this imperatively:

var googleMap = document.querySelector('google-map');
map.addEventListener('google-map-ready', function(e) {
  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(this.map);
});

There's not a declarative toggle for traffic.

Feel free to propose a PR :)

commented

Is your code right there? It seems like you just call google out of thin air. Is there a google object created when the google-map element is constructed? Also, it seems like you have a map variable out of thin air?

commented

@ebidel Sorry to bother you, but I tried that and it doesn't work.

commented

Sorry try:

var googleMap = document.querySelector('google-map');
googleMap.addEventListener('google-map-ready', function(e) {
  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(this.map);
});

The maps api (google.maps) will be loaded by the time google-map-ready is fired.

commented

ah...thanks.

I got it to work.

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


<link rel="import" href="shared-styles.html">

<dom-module id="cincinnati-traffic">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
      }

      #googleMap {
        position: static;
      }
    </style>

    <div class="item-title">Cincinnati Traffic</div>
    <google-map
      id='googleMap'
      api-key='################################'
      latitude='39.144712'
      longitude='-84.5064878'
      zoom='12'
      map-type='terrain'
      disable-default-ui
      disable-map-type-control
      disable-street-view-control
      disable-zoom
      drag-events
      on-google-map-ready='mapLoaded'
    ></google-map>

  </template>

  <script>
    Polymer({
      is: 'cincinnati-traffic',

      ready: function() {
      },

      mapLoaded: function() {
        console.log('map loaded')
        var map = this.$$('#googleMap');
        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map.map);

      }
    });
  </script>
`