gistfile1.coffee

jQuery ->
	$("#map").each ->
		panorama	= null
		marker		= null
		lat         = $(this).data('lat')
		long        = $(this).data('long')
		address     = $(this).data('address')
		coordinates = [lat, long]
		
		$(this).gmap3(
			{
				action: 'init',
				options: {
					center: coordinates,
					zoom: 16
				}
			},
			{
				action: 'addMarker',
				latLng: coordinates,
				callback: (data) ->
					marker = data
			},
			{
				action: 'setStreetView',
				id: 'streetview',
				options:
					{
						position: coordinates,
						pov:
							{
								heading: 0,
								pitch: 10,
								zoom: 1
							}
					}
				callback: (data) ->
					panorama = data
				events:
					{
						position_changed: ->
							# Calculate and set bearing
							# Calculation is done using coordinates of the streetview camera and the location
							markerPos = marker.getPosition(); 
							panoPos = panorama.getPosition(); 
					
							markerPosLat = markerPos.lat() / 180 * Math.PI
							markerPosLng = markerPos.lng() / 180 * Math.PI
					
							panoPosLat = panoPos.lat() / 180 * Math.PI
							panoPosLng = panoPos.lng() / 180 * Math.PI
					
							y = Math.sin(markerPosLng - panoPosLng) * Math.cos(markerPosLat)
							x = Math.cos(panoPosLat)*Math.sin(markerPosLat) - Math.sin(panoPosLat)*Math.cos(markerPosLat)*Math.cos(markerPosLng - panoPosLng)
							brng = Math.atan2(y, x) / Math.PI * 180
							
							pov = panorama.getPov()
							pov.heading = brng
							panorama.setPov(pov)
					}
				}
		)