Ember.js - Google Map Component

by Brandon

HTML

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.2.1/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.4.0/ember.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<body>
    <script type="text/x-handlebars">
        {{google-map id="map" latitude="40.7539854" longitude="-111.8916459" disableDefaultUI=true useMarker=true zoom=5}}
    </script>
</body>

CSS

#map {
    width: 255px;
    height: 165px;
}

CoffeeScript

String.EMPTY = ""


App = Ember.Application.create()


App.GoogleMapComponent = Ember.Component.extend

  tagName    : 'div'
  attributes : [ 'disableDefaultUI', 'latitude', 'longitude', 'markerTitle', 'useMarker', 'zoom' ]


  didInsertElement: ->
    debugger
    hasErrors = false

    if !@latitude? || isNaN(@latitude)
      hasErrors = true
      console.error "ERROR: GoogleMap Ember Component - latitude is a required attribute and must be a valid number!"
    if !@longitude? || isNaN(@longitude)
      hasErrors = true
      console.error "ERROR: GoogleMap Ember Component - longitude is a required attribute and must be a valid number!"
    if hasErrors
      throw "Invalid tag attributes found"

    debugger

    mapOptions =
      zoom             : if @zoom? && !isNaN(@zoom) then Number(@zoom) else 8
      center           : new google.maps.LatLng(Number(@latitude), Number(@longitude))
      disableDefaultUI : @disableDefaultUI if @disableDefaultUI? && typeof @disableDefaultUI == 'boolean'

    map = new google.maps.Map(this.$()[0], mapOptions)

    if @useMarker == true
      new google.maps.Marker
        position : mapOptions.center
        map      : map
        title    : if @markerTitle? then @markerTitle else String.EMPTY