lawrencechanyewlong/wherewolfpro

%h1 Select Destination
%p or press Next without placing a marker on the map. 

%meta{:content => "initial-scale=1.0, user-scalable=no", :name => "viewport"}/
%meta{:charset => "utf-8"}/
:css
  html, body {
    height: 100%;
    margin: 0px 10px;
    padding: 0;
  }
  #map {
    height: 63%;
  }
  .controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  #pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
  }

  #pac-input:focus {
    border-color: #4d90fe;
  }

  .pac-container {
    font-family: Roboto;
  }

  #type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
  }

  #type-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
  }
  #target {
    width: 345px;
  }
%input#pac-input.controls{:placeholder => "Search Box", :type => "text"}/
#map
%script{:src => "https//mapsgoogleapis.com/api/js?&libraries=places"}
:javascript
  var markers = [];
  lat = #{@address_lat};
  long = #{@address_lng};
  formatted_address = "No Destination Chosen"; 
  
  function initAutocomplete() {

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: #{@address_lat_init}, lng: #{@address_lng_init}},
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      
    });
    
    google.maps.event.addListener(map, 'click', function(event) {
      addMarker(event.latLng, map);
      lat = event.latLng.lat();
      long = event.latLng.lng();
      geocodeLatLng(); 
    });
    
    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

  
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
      var places = searchBox.getPlaces();

      if (places.length == 0) {
        return;
      } 

      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        var icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };

        // Create a marker for each place.
        

        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });
  }
  
  function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];
    var marker;
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
  }
  
  function geocodeLatLng() {
    var geocoder = new google.maps.Geocoder;
    var latlng = {lat: lat, lng: long};
    
    geocoder.geocode({'location': latlng}, function(results, status) {
        formatted_address = results[1].formatted_address; 
    });
  }
  
  function post(path, params, method) {
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit(); 
  }
  
  function submit_form() {
    post("", { lat: lat, long: long, formatted_address: formatted_address});
  }
  
%script{:async => "", :defer => "defer", :src => "https://maps.googleapis.com/maps/api/js?&libraries=places&sensor=false&callback=initAutocomplete"}

%nav.navbar.navbar-fixed-bottom{:style => "background: #000; padding: 20px"}
  .container
    .row
      .col-xs-3
        %a.btn.btn-danger{:href => "/"} 
          %span.glyphicon.glyphicon-arrow-left{"aria-hidden" => "true"}
          %span Back
      .col-xs-6
      .col-xs-3
        %a#next_button.btn.btn-success{:onclick => "submit_form();return false;", :href => '/event/select_contacts'}
          %span Next
          %span.glyphicon.glyphicon-arrow-right{"aria-hidden" => "true"}