2 Ways to Get Directions to Your Business on Your Website

A very important part of every local business’ website is a contact us and directions page. Many have a contact us page, some even have a map on their contact us page, but wouldn’t it be easier if you page had a map with directions? I did some research, and it seems that there is no easy way to do this. So, I started hacking at it using the Google Maps API. I got it to a point where it was working, but I was not satisfied with the way it looked or the complexity of the project. I decided to go a different route.

For its simplicity, here is the way I chose to go. I have not gotten the location from the browser to work, but if I do spend some time on it, I will add it here.

Here is the HTML. This basically just displays a map with the location. It also displays a text field to input directions manually. You can also add a button, and call the function on click of that button.

<div>
<input type="text" name="from" id="from" placeholder="Enter your address" onkeypress="getDirections()">
</div>

<div id="directions_map"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d221844.35813996338!2d-95.644356!3d29.681555999999905!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc28e8faa7c71994b!2sPhysiciansER+Mission+Bend+Emergency+Room!5e0!3m2!1sen!2sus!4v1401434479159" width="100%" height="500" frameborder="0" style="border:0"></iframe> </div>

 Here is the code. This changes the map based on what you type in the directions box.

  function getDirections() {
var start = document.getElementById('from').value;
if ( start == null || start == '' ) {
var map = '<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d221844.35813996338!2d-95.644356!3d29.681555999999905!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc28e8faa7c71994b!2sPhysiciansER+Mission+Bend+Emergency+Room!5e0!3m2!1sen!2sus!4v1401434479159" width="100%" height="500" frameborder="0" style="border:0"></iframe>';
} else {
var start = start.replace(/ /g, '+');
var map = '<iframe width="100%" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?origin=' + start + '&destination=PhysiciansER+Mission+Bend,+8910+Hwy+6+S,+Houston,+TX+77083,+United+States&key=AIzaSyA7UeaI1cBG7w7upRLYU8BI5HU5ymuTBnc"></iframe>';
} 
document.getElementById("directions_map").innerHTML = map;
dataLayer.push({'event':'GAevent', 'eventLabel':'Show Directions'});
}

This second half of this script pulls the location from the browser. It does this as soon as the user allows the website to use the browser’s location.

var x = document.getElementById("from");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap);
}

function showMap(position) {
document.getElementById("from").value = position.coords.latitude + "," + position.coords.longitude;
var map = '<iframe width="100%" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?origin=' + position.coords.latitude + "," + position.coords.longitude + '&destination=PhysiciansER+Mission+Bend,+8910+Hwy+6+S,+Houston,+TX+77083,+United+States&key=AIzaSyA7UeaI1cBG7w7upRLYU8BI5HU5ymuTBnc"></iframe>';
document.getElementById("directions_map").innerHTML = map;
dataLayer.push({'event':'GAevent', 'eventLabel':'Show Directions'});
}

This will only work if the user allows the website to pull the  In case you are interested in the “right way” to do it, here is what I ended up with. Obviously it is not finished because I decided to go a different route, but if used correctly, this way is much more powerful.  

<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-canvas {
height:80%;
width:80%;
margin:auto;
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}

#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
max-width: 80%;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;


function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var per = new google.maps.LatLng(29.681557, -95.644357);
var mapOptions = {
zoom:11,
center: per
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">PhysiciansER Mission Bend</h1>'+
'<div id="bodyContent">'+
'<p>8910 Highway 6 S<br>'+
'Houston, TX 77083<br>'+
'(713) 766-4844</p>'+
'</div>'+
'</div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
}); 


var marker = new google.maps.Marker({
position: per,
map: map,
title: 'PhysiciansER Mission Bend'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
directionsDisplay.setMap(map);
}

function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}

function calcRoute() {
var start = document.getElementById('address').value;
var end = new google.maps.LatLng(29.681557, -95.644357);
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}

google.maps.event.addDomListener(window, 'load', initialize);

var input = document.getElementById('address');
var options = {
types: ['geocode'],
componentRestrictions: {country: 'us'}
};

//autocomplete = new google.maps.places.Autocomplete(input, options);

</script>


<div id="panel">
<b>Directions from:</b>
<input id="address" type="textbox" placeholder="Type your address here" onFocus="geolocate()">
<input type="button" value="Get Directions" onclick="calcRoute()">
</div>
<div id="map-canvas"></div>

Sources and examples:
autocomplete example
Google Maps API Reference
Directions example