Bootstrap Google Map with get directions feature (Google Map API)

As the title says, a simple Google Map with get directions feature.

Simply change the Lat and Long and address and you’re good to go.

DEMO

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 //<![CDATA[
 var directionDisplay;
 var directionsService = new google.maps.DirectionsService();
 var map;
 var panorama;
 
 //CHANGE LAT LONG TO THE LOCATION YOU'D LIKE TO SHOW
 var latLng = new google.maps.LatLng(51.672126, 0.257473);
 function initialize() {
 directionsDisplay = new google.maps.DirectionsRenderer();
 
 var myOptions = {
 center: latLng,
 zoom: 13,
 streetViewControl: false,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 
 map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
 directionsDisplay.setMap(map);
 directionsDisplay.setPanel(document.getElementById("directionsPanel"));
 
 panorama = map.getStreetView();
 panorama.setPosition(latLng);
 panorama.setPov({
 heading: 125, /* SPIN STREET VIEW */
 zoom:1,
 pitch:0}
 );
 }
 function openWindow(){
 var yourMarker = new google.maps.Marker({
 position: latLng,
 map: map
 });
 //CHANGE THESE DETAILS TO THE ADDRESS YOU LIKE TO SHOW
 //NOTE, THIS ADDRESS IS FOR DISPLAY ONLY, THIS DOESN'T MODIFY THE MAPS LOCATION
 var content = '<p style="color:#666; margin:0; padding:0; line-height:normal;"><strong>Secret Nuclear Bunker</strong><br/>Kelvedon Hall Ln,<br/>Kelvedon Hatch,<br/>Brentwood,<br/>Essex<br/>CM14 5TL<br/><br/><strong>Tel</strong>: 01277 364 883<br/><strong>URL</strong>: <a href="http://www.secretnuclearbunker.com" target="_blank">secretnuclearbunker.com</a><br/></p><br /><input type="button" name="street" class="street" value="Street View" onclick="toggleStreetView();" /><div class="clearfix"></div>';
 var infowindow = new google.maps.InfoWindow({
 content: content


 });
 google.maps.event.addListener(yourMarker, 'click', function() {
 infowindow.open(map, yourMarker);
 });
 infowindow.open(map, yourMarker);
 }
 function calcRoute() {
 var start = document.getElementById("postcode").value;
 var request = {
 origin:start, 
 destination:latLng,
 travelMode: google.maps.DirectionsTravelMode.DRIVING,
 unitSystem: google.maps.UnitSystem.IMPERIAL
 };
 directionsService.route(request, function(response, status) {
 if (status == google.maps.DirectionsStatus.OK) {
 directionsDisplay.setDirections(response);
 }
 });
 }
 function toggleStreetView() {
 var toggle = panorama.getVisible();
 if (toggle == false) {
 panorama.setVisible(true);
 } else {
 panorama.setVisible(false);
 }
 }
 window.onload = initialize;
 setTimeout("openWindow()",1000);
 //]]>
</script>

<script type="text/javascript">window.onload=function(){initialize();}</script>

<div id="map-canvas" class="t1_footer_map" style="width:100%;height:500px"></div>

<hr/>

<div class="col-xs-12 col-sm-6"><input id="postcode" class="form-control" name="postcode" type="text" placeholder="Enter Postcode..." value="" /></div>

<div class="col-xs-12 col-sm-6"><input type="button" class="btn btn-default" value="Get Directions" onclick="calcRoute();" /></div>

<div class="clearfix"></div>

<hr/>

<div id="directionsPanel" class="mapdir"></div>