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

Google Maps

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.

Comments

  1. Shibby's avatar
    Shibby
    | Permalink
    Very detailed explination.
    Thank you very much
  2. D's avatar
    D
    | Permalink
    The first line in the CSS should read:#map-container.
    Not map-holder.

    Right? or am I missing something here?