map.coffee

map.coffee

$.fn.extend
  multiMap: (options) ->

    if !$(@).length > 0
        return

    $self = $(@)

    settings = {
      callback: ()->
    }
    # mapArr = []
      # duration: 500

    # Merge default settings with options.
    settings = $.extend settings, options


    # init = ->
    google.load("maps", "3.x", {"other_params":"sensor=false"})
    # 作成したマップの呼び出し



    initialize = ()->
      $self.each (i,e)->

        # console.log("hello")
        obj = {}
        # console.log(e)
        obj.latLng = new google.maps.LatLng($(e).data('lat'),$(e).data('lng'))
        obj.myOptions = {
          zoom: 18,                                 #ズームレベル
          center: obj.latLng,                         #中心座標
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel: false,
          mapTypeControl: true,  #マップタイプ
          mapTypeControlOptions:
            mapTypeIds: [
              google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.SATELLITE,
              'simple'
            ]
        }
        if window.devicePixelRatio >= 1.5
          obj.myOptions.zoom = 16

        obj.mapStyle = [
          {
            "stylers": [
              { "visibility": "simplified" },
              { "saturation": -100 },
              { "gamma": 0.92 },
              { "lightness": 38 }
            ]
          }
        ]

        obj.styleOptions = {
          name: "test"
        }

        obj.map = new google.maps.Map(e, obj.myOptions)
        google.maps.event.addDomListener window, 'resize', ()->
          obj.map.panTo(obj.myOptions.center)

        obj.mapType = new google.maps.StyledMapType(obj.mapStyle, obj.styleOptions)
        obj.map.mapTypes.set('simple', obj.mapType);
        obj.map.setMapTypeId('simple');


        if window.devicePixelRatio >= 1.5
          obj.marker = new google.maps.Marker(
            map: obj.map,
            position: new google.maps.LatLng($(e).data('lat'),$(e).data('lng')),
            icon: {

              url: '/images/map/[email protected]',
              size: new google.maps.Size(130, 154),
              anchor : new google.maps.Point(31, 77),
              scaledSize: new google.maps.Size(65,77)

            }
        )
        else

          obj.marker = new google.maps.Marker(
            map: obj.map,
            position: new google.maps.LatLng($(e).data('lat'),$(e).data('lng')),
            icon:

              url: '/images/map/marker.png',
              size: new google.maps.Size(65, 77),
              origin : new google.maps.Point(0, 0),
              anchor : new google.maps.Point(32, 77),

            ,
          )

        settings.callback({
          num   :i,
          map   :obj.map,
          latLng:obj.latLng
          })


    google.setOnLoadCallback(initialize)





$('.js-map').multiMap(
  callback:(obj)->

    $(".js-tabs li").eq(obj.num).on 'click', (e)->
      tab = e.target.href
      tab = "#"+tab.split("#")[1];
      $(tab+" .js-map").css({opacity:0})
      setTimeout(()->
        google.maps.event.trigger(obj.map, 'resize')
        obj.map.setCenter(obj.latLng)
        $(tab+" .js-map").velocity({opacity:1},500)
      ,1000)

)