If you want to use an interactive map, it's all javascript code. When you have your lat & lng values of the office, you can do something like the following:
<div id="map"></div>
In the html, and have in your javascript (jquery).
$.fn.ready(function() {
var lat = 10.0000; // change to your value
var lng = 10.0000; // change to your value
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("map"), { zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(parseFloat(lat), parseFloat(lng)) });
var lat_lng = new google.maps.LatLng(parseFloat(point.lat), parseFloat(point.lng));
var marker = new google.maps.Marker({
position: lat_lng,
title: "point"
});
marker.setMap(map);
bounds.extend(lat_lng);
map.fitBounds(bounds);
});
I haven't tested the code. I kind of grabbed some logic i had from a project where i rendered several points on the map, and it was also in coffeescript, so i'm not sure if i missed anything. In short though, it's all the googlemaps api.