Overview:

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

Requirements:

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

Components:

Template

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

<script>
<!-- Insert Javascript Component Here -->
</script>     

CSS:

#map-holder{
	background:#fff;
	border:1px solid #c5c5c5;
	display:block;
	height:400px;
 	margin:20px 20px 0;
	padding:5px;
	width:960px; 
}
#google-map{
	display:block;
	height:100%;
}

Javascript:

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,
		panControl:false,
		zoomControl:false,
		scaleControl:false,
		mapTypeControl:false, 
		streetViewControl:false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
 	map = new google.maps.Map(document.getElementById("google-map"), myOptions);
	geocoder = new google.maps.Geocoder();
	geocode();
}
function geocode(){
	geocoder.geocode({'address': address,'partialmatch': true}, geocodeResult);
}
function geocodeResult(results, status) {
	if (status == 'OK' && results.length > 0) {
		map.fitBounds(results[0].geometry.viewport);
		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 = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
	document.body.appendChild(script);
}
window.onload = loadScript;

Installation:

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.