polymer starter kit, google-map, examples together

Question

I am trying to display a google-map on a Polymer Starter-kit page.

I start with Polymer init... go with the standard Starter-kit... Do a ... bower install --save GoogleWebComponents/google-map I get a Google Map Key...

Everything works great... except. I can not get the damn map to display on a page. I can go through the example and tutorials... no trouble. But getting the tag to work in the Start-kit has been a problem. Does anyone have some examples with google-map in Starter-kit? Ideally where you create/use a custom module?

IrishGringo IrishGringo · Accepted Answer · 2016-12-01T06:47:02

Works as advertised. This is the code for one of the My-viewX.html pages. Just follow above instructions, and add this code. Stay tune, and I will add data binding

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

<dom-module id="my-view5">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
      }
      google-map {
        height: 600px;
      }
</style>
    </style>

    <div class="card">
        <h1>Put map here here</h1>
    </div>

<div class="card">
<google-map 
    latitude="37.779" 
    longitude="-122.3892"
    api-key="AIzaStyggztMTmDZ34gjjjdtasMC67fgdme4jOC5Nqk"     
    zoom="13" 
    disable-default-ui>
    <google-map-marker  
        latitude="37.779" 
        longitude="-122.3892"
        title="Go Giants!" 
        draggable="true">
    </google-map-marker>

    <google-map-marker 
      latitude="37.77493" 
      longitude="-122.41942"
        title="Go tits!">
    </google-map-marker>
    </google-map>
    </div>
  </template>

  <script>
    Polymer({
      is: 'my-view5'
    });
  </script>
</dom-module>

polymer starter kit, google-map, examples together

1 Answers