Modulo para cargar y dar estilo al mapa de google

load_map.coffee

###
Modulo para cargar y dar estilo al mapa de google
@class load_map
@main Aviso
@author Claudia Valdivieso
###
yOSON.AppCore.addModule "load_map", (Sb) ->
	st =
		mapLocation			: ".map_location"
		locationButton		        : ".map_location_button"
		button 				: "#btnGetMap"
		imageMap 			: "#imageMap"
		mapa 				: "#mapCanvas" # se sugiere que esta variable sea en ingles, osea map
		templateStaticImage             : "#staticImage"
		wrapper 			: ".job_description_wrapper"

	mapScript =
		type 	: 'text/javascript'
		src 	: 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&async=2&callback=initializeMap'

	dom = {}

	catchDom = ->
		dom.wrapper = $(st.wrapper)
		dom.mapLocation = $(st.mapLocation, dom.wrapper)
		dom.locationButton = $(st.locationButton, dom.mapLocation)
		dom.button = $(st.button, dom.locationButton)
		dom.mapa = $(st.mapa, dom.mapLocation)
		dom.templateStaticImage = $(st.templateStaticImage)

		st.latitud = dom.mapa.attr('data-latitud')
		st.longitud = dom.mapa.attr('data-longitud')
		st.primaryColor = dom.mapa.attr('data-color')
		return

	afterCatchDom = ->
		if dom.mapLocation.length
			fn.loadImageMap()
		return

	suscribeEvents = ->
		dom.mapLocation.on 'click', events.loadMap
		dom.button.on 'click', events.loadMap
		return

	events =
		loadMap : (e) ->
			e.stopPropagation()
			fn.loadScript()
			# Sería mejor usar la sintaxis de coffee script, osea usar isnt.
			if dom.imageMap != undefined # if dom.imageMap isnt undefined 
				dom.imageMap.hide()  # Por otro lado != no es lo mismo que !==
			dom.mapa.show()
			return

	fn =
		loadImageMap : () ->
			sizeWidth = dom.wrapper.width()
			fn.showMapImage(dom.mapLocation, dom.templateStaticImage, sizeWidth, st.latitud, st.longitud, st.primaryColor)
			dom.imageMap = $(st.imageMap, dom.mapLocation)
			return

		showMapImage : (mapLocation, templateStaticImage, sizeWidth, latitud, longitud, primaryColor) ->
			template = _.template(templateStaticImage.html())
			data = {
				sizeWidth: sizeWidth
				latitud: latitud
				longitud: longitud
				color: primaryColor
			}
			mapLocation.append(template(data))

			return

		loadScript : () ->
			window.initializeMap = ()->
				fn.initializeMap(st.primaryColor, st.latitud, st.longitud)
				return 
			
			script = document.createElement('script')
			script.type = mapScript.type
			script.src = mapScript.src
			document.body.appendChild script
			
			return

		initializeMap : (color, latitud, longitud) ->
			styles = fn.generateStyles(color)

			styledMap = new google.maps.StyledMapType(styles, {name: "Mapa"})
			myLatlng = new google.maps.LatLng(latitud, longitud)
			
			mapOptions = {
				scrollwheel : false,
				zoom 		: 14,
				center 		: myLatlng
				mapTypeControlOptions: {
					mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
				}
			}
			
			map = fn.generateMap(dom.mapa[0], mapOptions, styledMap)
			
			pinImage  = fn.generatePinImage(color)
			marker = fn.generateMarker(pinImage, myLatlng)
			marker.setMap(map)
			
			return

		generateMap : (divMapa, mapOptions, styledMap) ->
			map = new google.maps.Map(divMapa, mapOptions)
			map.mapTypes.set('map_style', styledMap)
			map.setMapTypeId('map_style')
			return map

		generateStyles : (color) ->
			styles = [
				{
					"featureType": "all",
					"elementType": "all",
					"stylers": [
						{
							"visibility": "on"
						}
					]
				},
				{
					"featureType": "administrative",
					"elementType": "labels.text.fill",
					"stylers": [
						{
							"color": "#444444"
						}
					]
				},
				{
					"featureType": "landscape",
					"elementType": "all",
					"stylers": [
						{
							"color": "#f2f2f2"
						}
					]
				},
				{
					"featureType": "poi",
					"elementType": "all",
					"stylers": [
						{
							"visibility": "off"
						}
					]
				},
				{
					"featureType": "road",
					"elementType": "all",
					"stylers": [
						{
							"saturation": -100
						},
						{
							"lightness": 45
						}
					]
				},
				{
					"featureType": "road.highway",
					"elementType": "all",
					"stylers": [
						{
							"visibility": "simplified"
						}
					]
				},
				{
					"featureType": "road.arterial",
					"elementType": "labels.icon",
					"stylers": [
						{
							"visibility": "off"
						}
					]
				},
				{
					"featureType": "transit",
					"elementType": "all",
					"stylers": [
						{
							"visibility": "off"
						}
					]
				},
				{
					"featureType": "water",
					"elementType": "all",
					"stylers": [
						{
							"color": color
						},
						{
							"visibility": "on"
						}
					]
				}
			]
			return styles

		generatePinImage : (color) ->
			urlIconMarker 			= "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + color + "|000000"
			sizeIconMarker 			= new google.maps.Size(21, 34)
			centerpointIconMarker 	= new google.maps.Point(0,0)
			pointIconMarker 		= new google.maps.Point(10, 34)

			pinImage = 
				new google.maps.MarkerImage( 
					urlIconMarker,
					sizeIconMarker,
					centerpointIconMarker,
					pointIconMarker
				)
			return pinImage

		generateMarker : (pinImage, myLatlng) ->
			marker = new (google.maps.Marker)(
					icon	: pinImage
					position: myLatlng
					title 	: ''
				)
			return marker

	initialize = (opts) ->
		$.extend(st, opts)
		catchDom()
		afterCatchDom()
		suscribeEvents()
		return
	return {
		init: initialize
		tests: fn 
	}

,["js/libs/jquery.device.js", "js/libs/underscore/underscore-min.js"]