Permalink
Browse files

added google maps things

  • Loading branch information...
1 parent 1eb2d8e commit 5fbfc8f0dbb40fe7a8dbed38158521dff54f94ec @stephanvane committed Mar 21, 2011
View
@@ -21,6 +21,8 @@ gem 'kaminari'
gem 'jquery-rails'
gem 'devise'
+gem 'geocoder'
+
# Use unicorn as the web server
# gem 'unicorn'
View
@@ -47,6 +47,7 @@ GEM
factory_girl_rails (1.0.1)
factory_girl (~> 1.3)
railties (>= 3.0.0)
+ geocoder (0.9.10)
haml (3.0.25)
i18n (0.5.0)
jquery-rails (0.2.7)
@@ -115,6 +116,7 @@ DEPENDENCIES
compass (>= 0.10.6)
devise
factory_girl_rails
+ geocoder
haml
jquery-rails
kaminari
@@ -0,0 +1,5 @@
+class MapsController < ApplicationController
+ def show
+ @boats = Boat.all
+ end
+end
@@ -0,0 +1,2 @@
+module MapsHelper
+end
View
@@ -19,6 +19,8 @@ class Boat < ActiveRecord::Base
has_many :photos
belongs_to :owner
accepts_nested_attributes_for :photos
+ geocoded_by :address
+ after_validation :geocode
mount_uploader :banner, BannerUploader
@@ -0,0 +1,7 @@
+.exposureThumbs li {
+ margin: 12px 12px 12px 0;
+
+ &.last {
+ margin-right: 0;
+ }
+}
@@ -0,0 +1,14 @@
+.mapsInfo {
+ img {
+ }
+
+ .price {
+ float: right;
+ color: gray;
+ }
+
+ .link a {
+ color: black;
+ font-weight: bold;
+ }
+}
@@ -1,192 +0,0 @@
-/*if you just want to adjust the size of the stage and the thumbnails, you can do so by editing the following lines: */
-.pika-thumbs li {
- width: 144px;
- height: 74px;
-}
-
-.pikachoose {
- width: 520px;
- margin: 0
- auto;
-}
-
-.pika-stage {
- position: relative;
- background: #fafafa;
- border: 1px solid #e5e5e5;
- padding: 10px 10px 40px 10px;
- text-align: center;
- height: 330px;
- width: 539px;
-
- .main-image {
- position: absolute;
- top: 10px;
- left: 10px;
- }
-
- .pika-aniwrap {
- position: absolute;
- top: 10px;
- left: 0px;
- width: 100%;
- }
-
- .pika-ani {
- position:relative;
- display: none;
- z-index: 2;
- margin: 0 auto;
- }
-
- img {
- border:0;
- height:100%;
- }
-
- .caption {
- position: absolute;
- background: image-url('pikachoose/75-black.png');
- border: 1px solid #141414;
- font-size: 11px;
- color: #fafafa;
- padding: 10px;
- text-align: right;
- bottom: 50px;
- right: 10px;
- }
-
- .caption p {
- padding: 0;
- margin: 0;
- line-height: 14px;
- }
-}
-
-.pika-imgnav a {
- position: absolute;
- text-indent: -5000px;
- display: block;
- z-index: 3;
-
- &.previous {
- background: image-url('pikachoose/prev.png') no-repeat left 45%;
- height: 100%;
- width: 50px;
- top: 10px;
- left: 10px;
- cursor:pointer;
- }
-
- &.next {
- background: image-url('pikachoose/next.png') no-repeat right 45%;
- height: 100%;
- width: 50px;
- top: 10px;
- right: 10px;
- cursor:pointer;
- }
-
- &.play {
- background: image-url('pikachoose/play.png') no-repeat 0% 50%;
- height: 100px;
- width: 44px;
- top:0;
- left:50%;
- display: none;
- cursor:pointer;
- }
-
- &.pause {
- background: image-url('pikachoose/pause.png') no-repeat 0% 50%;
- height: 100px;
- width: 44px;
- top:0;
- left:50%;
- display:none;
- cursor:pointer;
- }
-}
-
-.pika-textnav {
- overflow: hidden;
- margin: 10px 0 0 0;
-
- a {
- font-size: 12px;
- text-decoration: none;
- color: #333;
- padding: 4px;
- &.previous {
- float: left;
- width: auto;
- display: block;
- }
- &.next {
- float: right;
- width: auto;
- display: block;
- }
- }
-}
-
-.pika-thumbs {
- margin: 10px 0;
- padding: 0;
- overflow: hidden;
-
- li {
- float: left;
- list-style-type: none;padding: 3px;
- margin: 0 5px;
- background: #fafafa;
- border: 1px solid #e5e5e5;
- cursor: pointer;
-
- .clip {
- position:relative;
- height:100%;
- text-align: center;
- vertical-align: center;
- overflow: hidden;
- }
- }
-}
-
-/*for the tool tips*/
-.pika-tooltip {
- font-size:12px;
- position:absolute;
- color:white;padding:3px;
- background-color: rgba(0,0,0,0.7);
- border:3px solid black;
-}
-.pika-counter{
- position: absolute;
- bottom: 45px;
- left:15px;
- color:white;
- background:rgba(0,0,0,0.7);
- font-size:11px;
- padding:3px;
- -moz-border-radius: 5px;
- border-radius:5px;
-}
-
-/* jCarousel Styles */
-/*if you're not using the carousel you can delete everything below this */
-.jcarousel-skin-pika .jcarousel-container-horizontal {
- //padding: 15px 20px;
- width: 561px;
- padding: 10px 0;
-}
-.jcarousel-skin-pika .jcarousel-clip-horizontal {
- //height: 90px; width: 485px;
- //height: 90px;
- width: 486px;
- margin: auto;
-}
-.jcarousel-skin-pika .jcarousel-item-horizontal {
- //margin-right: 10px;
- //margin-left: 10px;
-}
@@ -13,4 +13,5 @@
@import "partials/two_col";
-@import "partials/pikachoose"
+@import "partials/exposure";
+@import "partials/maps";
@@ -17,10 +17,10 @@ def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
- process :resize_to_fill => [539, 330]
+ process :resize_to_fill => [560, 420]
version :thumb do
- process :resize_to_fill => [200, 150]
+ process :resize_to_fill => [131, 100]
end
# Provide a default URL as a default if there hasn't been a file uploaded:
@@ -3,6 +3,11 @@
= f.label :name
.field
= f.text_field :name
+
+ .label
+ = f.label :address
+ .field
+ = f.text_area :address
.label
= f.label :slug
@@ -1,15 +1,2 @@
%h2 Add new boat
-= form_for @boat, :html => { :class => 'bp' } do |f|
- .label
- = f.label :name
- .field
- = f.text_field :name
- .label
- = f.label :slug
- .field
- = f.text_field :slug
- .label
- = f.label :description
- .field
- = f.text_area :description
- = f.submit
+= render 'form'
@@ -1,17 +1,42 @@
+- content_for :head do
+ = javascript_include_tag 'http://maps.google.com/maps/api/js?sensor=false'
+ :javascript
+ /*$(function() {
+ $('#images').exposure({
+ carouselControls: true,
+ pageSize: 4
+ });
+ });*/
+
+ var lat = #{@boat.latitude};
+ var lon = #{@boat.longitude};
+
+ $(function() {
+ var position = new google.maps.LatLng(lat, lon);
+ var options = {
+ zoom: 16,
+ center: position,
+ mapTypeId: google.maps.MapTypeId.HYBRID,
+ disableDefaultUI: true
+ };
+
+ var map = new google.maps.Map($('#map')[0], options);
+ var marker = new google.maps.Marker({position: position, map: map});
+ });
+
- content_for :menu do
%ul
%li= link_to 'Edit', :action => :edit
-:javascript
- $(function() {
- $('#gallery').PikaChoose({carousel: true});
- });
%h2= @boat.name
= image_tag @boat.banner.url
%p= @boat.description
- if @boat.photos.any?
- %ul#gallery.jcarousel-skin-pika
+ %ul#images
- @boat.photos.each do |p|
- %li= image_tag p.file.url
+ %li= link_to image_tag(p.file.url :thumb), p.file.url
+#map{ :style => 'width: 561px; height: 400px;' }
+ -#%img{:src => "http://maps.google.com/maps/api/staticmap?zoom=14&markers=#{CGI.escape @boat.address}&size=500x500&sensor=false"}
+
@@ -10,8 +10,14 @@
/[if lt IE 8]
= stylesheet_link_tag 'compiled/ie.css', :media => 'screen, projection'
+ -#= stylesheet_link_tag 'colorbox/colorbox.css'
+ -#= stylesheet_link_tag 'exposure/demo.css'
+
= javascript_include_tag :defaults
- = javascript_include_tag 'pikachoose/lib/jquery.pikachoose.full.js'
+ -#= javascript_include_tag 'exposure/jquery.exposure.js'
+ -#= javascript_include_tag 'colorbox/jquery.colorbox.js'
+
+ = yield :head
%body.bp
.container
@@ -0,0 +1,6 @@
+.mapsInfo
+ = link_to image_tag(boat.banner.url(:thumb)), boat
+ %h3= boat.name
+ %p= boat.description
+ %span.link= link_to 'More info', boat
+ %span.price 49 €
Oops, something went wrong.

0 comments on commit 5fbfc8f

Please sign in to comment.