<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpPZwcIZ6KnVjJh3MPqs8_XEfB3ZGKkYQ&libraries=geometry,places">
</script>
<div class="container">
<span id="list"></span>
<br />
<br />
<div id="map_canvas" style="width: 500px; height: 250px;"></div>
<h3>Passenger Number Input ( Popover Form + Spinner Input )</h3>
<p>Input form with sub inputs</p>
<div class="row">
<div class="col-md-2">
<div class="popover-markup">
<div class="trigger form-group form-group-lg form-group-icon-left"><i class="fa fa-users input-icon input-icon-highlight"></i>
<label>Passenger request</label>
<input type="text" name="passengers" id="passengers" class="form-control" placeholder="Click to create request" disabled>
</div>
<div class="content hide">
<div id="compartmentSet">
</div>
<a class="btn btn-default btn-block demise">Select</a>
</div>
</div>
</div>
<div class="col-md-2">
<label>ID</label>
<input type="text" name="customer" id="customer" placeholder="Chuck Norris" class="form-control">
</div>
<div class="col-md-2">
<label>Lat:</label>
<input id="lat" name="lat" val="40.713956" class="form-control" />
</div>
<div class="col-md-2">
<label>Long:</label>
<input id="long" name="long" val="74.006653" class="form-control"/>
</div>
</div>
</div>
.popover-markup .popover{
width:150%;
}
.popover-markup label{
padding:0px;
}
.container{
margin:0px auto;
}
compartments = {XS:{current:0,max:5}, M:{current:0,max:5}, L:{current:0,max:5}, XL:{current:0,max:5}, A:{current:0,max:5}, C:{current:0,max:5}, B:{current:0,max:5}, I:{current:0,max:5}};
$(function () {
$compartment_form = function(){
s = "";
for (var key in compartments) {
if (compartments.hasOwnProperty(key)) {
compartmentId = key;
capacity = compartments[key].current;
max = compartments[key].max
s += '<div class="form-group">';
s += '<label class="control-label col-md-5"><strong>'+compartmentId+'</strong> ('+max+')</label>';
s += '<div class="input-group number-spinner col-md-7">';
s += '<span class="input-group-btn">';
s += '<a class="btn btn-danger" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></a>';
s += '</span>';
s += '<input type="text" disabled name="'+compartmentId+'" id="'+compartmentId+'" class="form-control text-center" value="'+capacity+'" max="'+max+'" min=0>';
s += '<span class="input-group-btn">';
s += '<a class="btn btn-info" data-dir="up"><span class="glyphicon glyphicon-plus"></span></a>';
s += '</span>';
s += '</div>';
s += '</div>';
}
}
return s;
};
var $popover = $('.popover-markup>.trigger').popover({
html: true,
placement: 'bottom',
content: function () {
$("#compartmentSet").html($compartment_form);
return $(this).parent().find('.content').html();
}
});
// close popover
$(document).click(function (e) {
if ($(e.target).is('.demise')) {
$('.popover-markup>.trigger').popover('hide');
}
});
// store form value when popover closed
$popover.on('hide.bs.popover', function () {
$(".popover-content input").each(function() {
compartments[$(this)[0].id].current = $(this).val();
});
});
// spinner(+-btn to change value) & total to parent input
$(document).on('click', '.number-spinner a', function () {
var btn = $(this),
input = btn.closest('.number-spinner').find('input'),
oldValue = input.val().trim();
if (btn.attr('data-dir') == 'up') {
if(oldValue < input.attr('max')){
oldValue++;
}
} else {
if (oldValue > input.attr('min')) {
oldValue--;
}
}
compartments[input[0].id].current = oldValue;
var t = "";
for (var key in compartments) {
if (compartments.hasOwnProperty(key)) {
compartmentId = key;
capacity = compartments[key].current;
if (capacity>0){
t+=compartmentId+":"+capacity+"/";
}
}
}
$('#passengers').val(t);
input.val(oldValue);
});
$(".popover-markup>.trigger").popover('show');
$initialize = function() {
var myLatlng = new google.maps.LatLng(40.713956, -74.006653);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
var map;
var myCoords = []
var placeMarker = function(location) {
var marker = new google.maps.Marker({
draggable: true,
position: location,
map: map,
title: "Your location"
});
pos = marker.getPosition();
c = {lat:pos.lat(), lon: pos.lng()};
myCoords.push(c);
console.log(myCoords);
document.getElementById("lat").value = c.lat;
document.getElementById("long").value = c.lon;
document.getElementById("list").innerHTML = getListCoords();
}
var getListCoords = function(){
console.log(myCoords.length);
console.log("bbbb"+myCoords);
str = "<ul>";
for(i=0;i<myCoords.length;i++){
str+= "<li>" + myCoords[i].lat + "," + myCoords[i].lat+","+$("#passengers").val()+"</li>";
}
str+= "</ul>";
return str;
}
google.maps.event.addDomListener(window, "load", $initialize);
});
