// 1. Obtain gmaps key and insert the following into the page you wish to display a map
/*
*/
// 2. Place the following 2 divs on the html page. One displays the map, the other is hidden and stores the postcode (used by google GlocalSearch class to pinpoint location
//
// [POSTCODE GOES HERE]
// 3. In a stylesheet, create a style for the gmap (length, width, border, etc..) along with the following hide style
//.hide{
// display:none
//}
// Notes: If, for some reason, you need to call the map and postcode ids something different, thats ok as long as you change the
// values in the object (mapID, postcodeID)
// Build gmap object
gmap = {
// Stores id of map div
mapID:'map',
// Stores id of postcode div
postcodeID:'postcode',
// Stores postcodes value (brought back from web page)
postcodeValue:null,
hideClass:'hide',
// Instatiate object (checks for DOM support)
init:function()
{
// Check to see if W3C DOM is available - if not terminate script
// If required objects are available, hide js alert and show update form
if(!document.getElementById || !document.createTextNode){return;}
// Define mapcontainer
var mapcontainer = document.getElementById(gmap.mapID);
// If the page contains the map container, dynamically remove the hde class and load the map
if(mapcontainer)
{
// mapcontainer element is availabe, so remove the hide class (used to hide if JS is disabled)
helper.cssjs('remove', mapcontainer, gmap.hideClass);
// load the google map
gmap.loadGmap();
}
},
// Load a google map using the postcode as the search data
loadGmap : function()
{
// Check if the browsers cmpatible with gmaps
if (GBrowserIsCompatible())
{
var postcodeID = document.getElementById(gmap.postcodeID);
gmap.postcodeValue = postcodeID.childNodes[0].data;
// Check if a postcode exists (some address' may not have postcodes)
if (gmap.postcodeValue !='')
{
gmap.getPointFromPostcode();
}
else // No postcode, hide the map container (could display a message or do whatever here - hiding the maps sufficient)
{
var mapcontainer = document.getElementById(gmap.mapID);
// var alerttext = document.createTextNode('Sorry, no map is available for this hotel');
// mapcontainer element is availabe, so remove the hide class (used to hide if JS is disabled)
helper.cssjs('add', mapcontainer, gmap.hideClass);
// Attach text to li node
mapcontainer.appendChild(alerttext);
return;
}
}
},
// Get the maps center point, determined by postcode
getPointFromPostcode : function()
{
// Declare and instatiate google GlocalSearch object which produces search results based on a geographic region
var localSearch = new GlocalSearch();
// Reference to googles local search (used to obtain uk postcodes)
var map = new GMap2(document.getElementById(gmap.mapID));
localSearch.setSearchCompleteCallback(null,
function()
{
if (localSearch.results[0])
{
// Get lat and long values from localseard
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
// Determine point (for centering and placing marker)
var point = new GLatLng( resultLat , resultLng );
// Set center point and zoom level
map.setCenter(point, 15);
// Create marker
var marker = new GMarker(point ,{icon:G_DEFAULT_ICON, draggable: false});
// Add marker to map
map.addOverlay(marker);
// Add map controls
map.addControl(new GSmallMapControl());
//marker.openInfoWindowHtml("Location by Postcode: " + postcode.toUpperCase() + "
If you would like to place the pointer at a new,
more accurate location - please click on the map.");
//marker.openInfoWindowHtml("
If this location is incorrect,
you can click and drag the marker
to your desired location.");
}
else // No postcode, hide the map container (could display a message or do whatever here - hiding the maps sufficient)
{
var mapcontainer = document.getElementById(gmap.mapID);
// Hide map
helper.cssjs('add', mapcontainer, gmap.hideClass);
// Attach text to li node
return;
}
});
localSearch.execute(gmap.postcodeValue);
}
}
// addEvent is a method used to sort of stack functions up after the page has loaded.
// On this page this method is watching the window and waiting till its loaded.
// After which the gmap.init object is initialized
helper.addEvent(window, 'load', gmap.init, false);