<div class="form-group">
	<label class="control-label col-sm-3" >Google map</label>
		<div class="col-sm-9">
		<div id="map-canvas" ></div>
	</div>
</div>

<script>
  	var startPoint = new google.maps.LatLng(32.103153, 34.789152);
	var mapOptions = {
		zoom: 6,
		center: startPoint
	}
	map = new google.maps.Map(document.getElementById('newshipment-map-canvas'), mapOptions);

	var input = (document.getElementById('pac-input'));

    var autocomplete = new google.maps.places.Autocomplete(input);

	google.maps.event.addListener(autocomplete, 'place_changed', function() {
		var place = autocomplete.getPlace();
	});

	directionsService = new google.maps.DirectionsService();
	newshipmentRender = new google.maps.DirectionsRenderer();
	newshipmentRender.setMap(newshipmentMap);

	pickUpPoint = new google.maps.LatLng(shipment.pu_lat, shipment.pu_long);
	deliveryPoint = new google.maps.LatLng(shipment.del_lat, shipment.del_long);
	var request = {
		origin: newshipmentPickPlace,
		destination: newshipmentDelPlace,
		optimizeWaypoints: true,
		travelMode: google.maps.TravelMode.DRIVING
	};

	directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			newshipmentRender.setDirections(response);
			var route = response.routes[0];
			for (var i = 0; i < route.legs.length; i++) {
				console.log(route.legs[i].start_address);
				console.log(route.legs[i].end_address);
				console.log(route.legs[i].distance.text);
			}
		}
	});
</script>

<a href ></a> <!-- for pointer cursor -->

<!-- initial value for select
ng-init="offer.vehicle='select'" -->