Google Map

google_map_view.coffee

Monquiro.Views ||= {}

class Monquiro.Views.GoogleMapView extends Backbone.View
  # A Backbone View always holds a div element in his @el variables.
  id: 'map' # Sets the id of the @el div
  
  initialize: () ->
    $(@el).css('width','100%') # You can access the @el div with jQuery even if it's not yet on the document.
    $(@el).css('height','600px')
    @map = null
    @bounds = null
    @geojsonlayer = {}

  initMap: () ->
    console.log('Init Map') 
    
    @latlng = new google.maps.LatLng(34.059486,-118.240814)
    @myOptions = {
      zoom: 16,
      center: @latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    @map = new google.maps.Map(@el, @myOptions)
  
    @bounds_changed_listener = google.maps.event.addListener @map, 'bounds_changed', @setBounds
    google.maps.event.addListener @map, 'dragend', @checkBB
        
  setBounds: () =>
    @bounds = @map.getBounds()
    @checkBB()
    google.maps.event.removeListener @bounds_changed_listener
    
  checkBB:() =>
    @bounds = @map.getBounds()
    ne = @bounds.getNorthEast()
    sw = @bounds.getSouthWest()
    @sendRequest(sw,ne)

  sendRequest: (sw,ne) ->
    $.ajax({
          url: Monquiro.Settings.ApiEndpoint + "/listings/boundaries.json",
          type: "GET",
          data: {
            "boundary": {
              "sw":[sw.lat(), sw.lng()],
              "ne":[ne.lat(), ne.lng()]
            }
          },
          dataType: "jsonp",
          crossDomain: true,
          success: (res) =>
            @convertGeoJSON(res);
      })

  convertGeoJSON: (data) =>
    $.each(data.features, (k,v) =>
      #check if this marker is not already there:
      if !@geojsonlayer[v.properties.oid] || !@geojsonlayer[v.properties.oid] == undefined
        #create popup window content
        windowContent = '<div style="width:250px;"><h6 id="firstHeading" class="firstHeading">'+v.properties.name+'</h6>
        <a href="index.html#/'+v.properties.oid+'"><img src="'+v.properties.thumbnail_url+'" width="100px"/></a></div>'
        #create it
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(v.geometry.coordinates[1],v.geometry.coordinates[0])
          title: v.properties.name,
          map: @map
        })
        infowindow = new google.maps.InfoWindow({
          content: windowContent
        })
        google.maps.event.addListener(marker, 'click', ->
          infowindow.open(@map,marker);
        )

        #add to hash
        @geojsonlayer[v.properties.oid] = marker
    )

  render: ->
    console.log('Google Map')
    # It's good practice to return the view instead of the el element.
    return this

index.coffee

openMap: () ->
  @view = new Monquiro.Views.GoogleMapView()
  $('#main').html(@view.render().el)
  @view.initMap()