gmap_markers.js.coffee

$ = jQuery

$.fn.extend({
  gmap: (options) ->
    el = this.data("gmap")
    
    return el if el?
    
    $(this).each((input_field) ->
      el = new Gmap(this, $(this).data())
    )
    
    return el
})

class Gmap
  
  constructor: (@dom_element, options = {}) ->
    defaults =
      lat: 50.4501
      lng: 30.5234
      zoom: 12
      marker: true
      map: {}
      
    @options = $.extend defaults, options
    
    this._setup()
  
  _setup: ->
    @element = $(@dom_element)
    @location = this._build_location()
    @map = this._build_map(@options.map)
    
    if @options.marker is true
      @marker = this._build_marker(@location)
    
    @element.data('gmap', this)
  
  _build_location: ->
    new google.maps.LatLng(@options.lat, @options.lng)
  
  _build_map: (options = {}) ->
    mapStyles = [{featureType: "all", stylers: [{hue: "#ffa200"}, {saturation: 45}]}]
    
    defaults =
      zoom: @options.zoom
      center: @location
      mapTypeId: google.maps.MapTypeId.ROADMAP
      sensor: 'true'
      styles: mapStyles
      scrollwheel: false
      streetViewControl: false
      backgroundColor: 'f4e8d3'
      disableDefaultUI: true
      navigationControl: true
      navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
    
    options = $.extend defaults, options
    
    new google.maps.Map(@element.get(0), options)
  
  _build_marker: (pos, options) ->
    options ?= 
      position: pos,
      map: @map,
      icon: '/assets/marker.png',
      shadow: '/assets/marker_shadow.png',
      animation: google.maps.Animation.DROP
        
    new google.maps.Marker(options)
  
  _build_cluster: (markers, options = {}) ->
    defaults =
      clusterClass: "marker_count"
      imagePath: "/assets/markers/"
      styles: [ {url: "/assets/markers/1.png", width: 33, height: 36, textColor: "#662f12", fontFamily: 'Georgia,"Times New Roman", serif'} ]
      
    options = $.extend defaults, options  
    
    return new MarkerClusterer(@map, markers, options)
  
  load_markers: (url) ->
    fn = (data) =>
      markers = []
      
      $.each(data, (index, item) =>
        pos = new google.maps.LatLng(item.latitude, item.longitude)
        marker = this._build_marker(pos) 
        
        google.maps.event.addListener(marker, "click", (e) =>
          new InfoBox({
            latlng: pos
            map: @map
            address: item.address
            phone: item.phone
            title: item.title
          })
        )
        
        markers.push marker
      )
      
      #@map.setCenter(markers[0].getPosition())
      @cluster = this._build_cluster(markers)
      
    $.get(url, {}, fn)
    
    return true
    
  window.Gmap = Gmap