Map Test

by wrxsti85

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="card">
	<div class="left-icon">
		<i class="fa fa-circle larger"></i>
		<i class="fa fa-circle"></i>
		<i class="fa fa-circle"></i>
		<i class="fa fa-circle"></i>
		<i class="fa fa-map-marker"></i>
	</div>
	<div id="controls">
		<input id="origin-input" class="controls" type="text" placeholder="Choose a starting point..." />
		<input id="destination-input" class="controls" type="text" placeholder="Enter a destination location" value="724 West Lancaster Avenue, Wayne, PA, United States" />
	</div>
	<div id="map"></div>
</div>
<script>

	var marker;
	var destinationID;
    function initMap() {
		var map;
		var geocoder = new google.maps.Geocoder();
		geocoder.geocode({
			'address': '724 West Lancaster Avenue, Wayne, PA, United States'
		}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				destinationID = results[0].place_id;
				var map = new google.maps.Map(document.getElementById('map'), {
					mapTypeControl: false,
					center: results[0].geometry.location,
					zoom: 13
				});
				marker = new google.maps.Marker({
					position: results[0].geometry.location,
					map: map,
					title: results[0].formatted_address
				});
				new AutocompleteDirectionsHandler(map);
			}
		});
    }

    function AutocompleteDirectionsHandler(map) {
        this.map = map;
        this.originPlaceId = null;
        this.destinationPlaceId = destinationID;
        this.travelMode = 'DRIVING';
        var originInput = document.getElementById('origin-input');
        var destinationInput = document.getElementById('destination-input');

        this.directionsService = new google.maps.DirectionsService;
        this.directionsDisplay = new google.maps.DirectionsRenderer;
        this.directionsDisplay.setMap(map);

        var originAutocomplete = new google.maps.places.Autocomplete(originInput, {
			placeIdOnly: true
		});
        var...

CSS

#map {
    height: 600px;
    display: block;
    width: 100%;
}

#card { background: #fff; }

.left-icon {
    float: left;
    width: 14px;
    text-align: center;
    padding: 38px 20px;
}

.left-icon i {
	color: #1c90f3;
}

.left-icon i.fa-circle { font-size: 6px; }
.left-icon i.fa-circle.larger { font-size: 14px; }
.left-icon i.fa-map-marker { font-size: 22px; margin-top: 6px; }

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.controls {
    margin-top: 20px;
	border: none;
    border-bottom: 1px solid #1c90f3;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    color: #1c90f3;
    outline: none;
}

.controls:focus {
	outline: none;
}

#controls {
    padding: 20px 0px;
    float: left;
    width: 80%;
}

#origin-input,
#destination-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    padding: 0px 11px 0px 0px;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
	font-weight: 400;
}

.controls::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #1c90f3;
  font-weight: 400;
}

.controls::-moz-placeholder { /* Firefox 19+ */
  color: #1c90f3;
  font-weight: 400;
}

.controls:-ms-input-placeholder { /* IE 10+ */
  color: #1c90f3;
  font-weight: 400;
}
.controls:-moz-placeholder { /* Firefox 18- */
  color: #1c90f3;
  font-weight: 400;
}

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

#mode-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
}