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.
<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>
