Setting up Gmaps for PJAX

gmaps.js.coffee

class GmapsSetup
  constructor:() ->
    @markers = []
    @polylines = []
    @lat = 51.50700
    @long = -0.09655

  CheckNewMap: ->
    if ($("[data-map]").attr("data-map") == "true") then true else false

  CheckPolylines: ->
    if ($("[data-polylines]").attr("data-polylines") == "true") then true else false

  GetBounds: (paths) ->
    bounds = new google.maps.LatLngBounds()
    for i in [0...paths.length]
      bounds.extend(paths[i])

    @map.fitBounds(bounds)

  Init: ->
    if @CheckNewMap()  
      @map = @NewMap() 
      @SetMarkers() 
    @AddPolylines() if @CheckPolylines()


  NewMap: -> 
    #Sets Map Up
    pickupLatLng = new google.maps.LatLng(@lat, @long);
    mapOptions = {
      center: pickupLatLng,
      zoom: 16,
      autozoom: false,
      scrollwheel: false, 
      zoomControl: true, 
      draggable: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    }

    map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions)

    map

  SetMarkers: ->
     for i in [0...@markers.length]
       #Adds marker
       marker = new google.maps.Marker({
         position: new google.maps.LatLng(@markers[i].lat, @markers[i].lng),
         map: @map,
       })
       #Sets custom marker
       marker.setIcon(@markers[i].picture, [@markers[i].width,@markers[i].height])

  AddPolylines: () ->
     paths = google.maps.geometry.encoding.decodePath(@polylines[0][0].coded_array)
     newpoly = new google.maps.Polyline({
        path:paths
        strokeColor: "#1b2c2e",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map:@map
      })
      
      #Adds path
      newpoly.setMap(@map)

      #Reset Map Center & Zoom
      @GetBounds(paths)

jQuery ($) ->
  window.loadGmaps = new GmapsSetup()

GmapsLoader.js.coffee

window.GmapsLoader = {
  Initialize: () ->
    #Triggers after Maps Load Dynamic
    # console.log markers
    loadGmaps.markers = markers if markers?
    loadGmaps.polylines = polylines if polylines?
    loadGmaps.Init()

  LoadScript: ()  ->
    #Loads API Dynamically
    script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?v=3.8&sensor=false&key=AIzaSyAp8euD346n5mF0jGvi_bCyUsluSl3r_iA&libraries=geometry&async=2&region=uk&callback=GmapsLoader.Initialize";
    document.body.appendChild(script);
}  

jQuery ($) ->
  window.onload = GmapsLoader.LoadScript()

pjaxload.js.coffee

$(document).ready ->
  if (history && history.pushState) 

    $.pjax.defaults.timeout = 10000 

    $(document).pjax("a.pjax", "[data-pjax-container]").on "pjax:end", ->
      #sets map
      #sets map
    loadGmaps.markers = markers if markers?
    loadGmaps.polylines = polylines if polylines?
      GmapsSetup.init()

template.html.haml

.map_container_wrapper{:data=>{:map=>:true, :polylines=>( :true if polylines.present? )}}
    #map-canvas.gmaps4rails_map

:javascript
      // alert("WTF???")
      var markers = #{json};
  -if polylines.present?
    :javascript
      var polylines = #{polylines};