Google Map Marker

by Philip Kahn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://amphibiandisease.org/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<base href="https://crossorigin.me/https://elements.polymer-project.org/bower_components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="google-map/google-map.html"/>
<link rel="import" href="google-map-marker/google-map-marker.html"/>
<dom-module id="page-content">
  <template id="polymer-template">
    Foobar
  </template>
  <script>
  Polymer({
    is: 'page-content',
    properties: {

    }
  });

</script>
</dom-module>

<template is="dom-bind" id="t">
  <page-content id="polymer-page-content"></page-content>
</template>

CoffeeScript

newPoint = """
<google-map-marker latitude='37.002552672159545' longitude='-117.09228515625' animation="DROP"></google-map-marker>
"""

$ ->
  # Base map
  html = """
<button class="btn btn-primary" id="add-point">Add New Point</button>
<br/><br/>
<google-map id="transect-viewport-0" latitude="37.89257740000001" longitude="-122.2435534" map-type="hybrid" click-events disable-default-ui zoom="7" class="center-block clearfix google-map transect-viewport map-viewport " style="width: 80%; height: 50vh;">
      <google-map-poly closed fill-color="#ff7800" fill-opacity="0.35" stroke-weight="1"><google-map-point latitude="37.8939263802915" longitude="-122.24490238029148"> </google-map-point><google-map-point latitude="37.8912284197085" longitude="-122.24490238029148"> </google-map-point><google-map-point latitude="37.8912284197085" longitude="-122.24220441970851"> </google-map-point><google-map-point latitude="37.8939263802915" longitude="-122.24220441970851"> </google-map-point><google-map-point latitude="37.8939263802915" longitude="-122.24490238029148"> </google-map-point>    </google-map-poly><google-map-marker latitude="37.8925774" longitude="-122.2435534" data-disease-detected="undefined" title="" animation="DROP">
  
</google-map-marker><google-map-marker latitude="37.8939263802915" longitude="-122.24220441970851" data-disease-detected="undefined" title=">
  
</google-map-marker><google-map-marker latitude="37.8939263802915" longitude="-122.24490238029148" data-disease-detected="undefined" title="">
  
</google-map-marker><google-map-marker latitude="37.8912284197085" longitude="-122.24490238029148" data-disease-detected="undefined" title="">
  
</google-map-marker><google-map-marker latitude="37.8912284197085" longitude="-122.24220441970851" data-disease-detected="undefined" title="">
  
</google-map-marker>
</google-map>
  """
  # Append it
  $("#polymer-template").append html
  # Set event
  $("#add-point").click ->
    $("google-map").append newPoint
   ...