Join our HiFi mailing list to receive the latest news & updates

Google Maps

2 Comment(s) | Posted | by Patrick Clarke | |


Show a location on a Google Map by providing just an address.


Javascript is needed to use Google's API for Geocoding the location.



<div id="map-container">
	<div id="google-map"></div>

<!-- Insert Javascript Component Here -->


	border:1px solid #c5c5c5;
 	margin:20px 20px 0;


var map;
var geocoder;
var address = '{{ this.custom.googlemaps.address }}'; // Replace the variable with your HiFi Custom Field
function initialize() {
	var latlng = new google.maps.LatLng(40.111676, -98.349584);
	var myOptions = {
		zoom: 4,
 		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
 	map = new google.maps.Map(document.getElementById("google-map"), myOptions);
	geocoder = new google.maps.Geocoder();
function geocode(){
	geocoder.geocode({'address': address,'partialmatch': true}, geocodeResult);
function geocodeResult(results, status) {
	if (status == 'OK' && results.length > 0) {
		var marker = new google.maps.Marker({
			position: map.getCenter(),
			map: map
	} else {
		alert("Geocode was not successful for the following reason: " + status);    
function loadScript() {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "";
window.onload = loadScript;


Add the <div id="google-maps"> onto your template and the styles to your stylesheet. Then you'll want to create a custom text field for the address on any pages you want to display the map. Then add the javascript directly to the template so you can have access to custom field variables, and change the address variable to your custom field tag.

Using Custom Fields to Create Easily Managed Page Layouts

0 Comment(s) | Posted | by Patrick Clarke | |

I don't like to see my clients attempt to implement a layout using inline css and tables. This is certainly true when their layouts contain regular and repeated pieces of content. Not only does the site get sloppy, but end-users and my team can exhaust a lot of time and effort in trying to make it right, unnecessarily. The cleanest solution to this problem is to make the content more structured and leave the layout concerns to the web team. This is exactly why HiFi's Custom Fields exist.

When I set out to put Security Self Storage of Cleveland's new redesign on HiFi there were three page layouts used throughout the site: a homepage, a generic interior page, and a locations page.

The locations page layout jumped right out to me.  Its content was highly structured. Revisions of the layout resulted in each page would have 18 unique content areas – some with multiple pieces – that may need to be displayed:

  • Address and content
  • Office & Access Hours
  • List of Amenities
  • List of Unit Sizes and Descriptions
  • You Tube Video
  • Gallery of Photos
  • Google map of the location
  • Coupons
  • Sidebar links
  • Page Subheading
  • Pay Instantly link
  • Google Maps direction widget
  • Location-specific discout offers
  • Testimonials
  • Location Phone Number
  • Navigation title for Drop Down menu
  • Phone number for a Pay-per-click campaign.
  • Tracking code for coupon download code.

I knew I could rely on HiFi Custom Fields to really lock-in the how content displayed on their five locations pages. Custom Fields allow the web site's developer to add structured data to pages that is easy to work with in template layouts. They also automatically provide form inputs in the user interface for the client to manage. Within HiFi there are seven types of custom fields:

  • Text field: ideal for single words or lines of text.
  • Textareas: great for paragraphs of text.
  • Dropdown lists
  • Radio Buttons
  • Checkbox
  • File (upload field)
  • Markdown (custom HTML)

Screen shot of the Custom Field page.Most of the content areas for this site were set up as textfields or textareas with the exception of the List of available Unit and sizes (Checkbox - one for each unit size offered), and the coupon file (File - PDF). 

I coded the templates to handle blank and default values sensibly. If the input field isn't empty the templates will display the information and corresponding markup. In a few situations, like the latitude and longitude fields for the google map, more than one field must contain data for it to be displayed on the page.

After a number of revisions, each of these pages have 44 individual input areas (220 total).  It will only take a matter of seconds to update information on particular pages, like when a facility no longer has particular unit sizes available, or when they want to offer a different coupon to their current or potential customers. I saved myself and the client a few hours of work by having these pages setup with custom fields as we ran through a number of content updates before the site launched.

For all that effort, here are the final location pages: