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

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
  $("body").append html
  # Set event
  $("#add-point").click ->
    $("google-map").append newPoint
    $("body").append...