Step 1.) Edit file: header.tpl
Define your style sheet
<link href=”{$modules_dir}contactform_map/css/contactform_css.php” rel=”stylesheet” type=”text/css” media=”all” />
<link href=”{$modules_dir}contactform_map/css/contact.css” rel=”stylesheet” type=”text/css” media=”all” />
Next, add the JavaScript…
Step 2.) Edit file: contactform_map.tpl
You need to modify the portion of the provided code with your Google API and set your Sensor’s parameter to either true or false. Sensor is a parameter to indicate whether the application uses GPS to determine the user’s location.
key= Enter your API key here
&sensor= Set parameter to either true or false (e.g. &sensor=false)
<!– Google Maps code start –>
{literal}
<script src=”https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&sensor=true-OR-false” type=”text/javascript”></script>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<script type=”text/javascript”>
//<![CDATA[
function display_map()
{
if (GBrowserIsCompatible()) {
// A function to create the marker and set up the event window
// Dont try to unroll this function. It has to be here for the function closure
// Each instance of the function preserves the contends of a different instance
// of the “marker” and “html” variables which will be needed later when the event triggers.
html =”<div style=\”width:250px; text-align: left;\”><b>Industrial & Electric Supply</b><br />209 Paredes Line Road<br />Brownsville, Texas 78523</div>”;
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById(“map”));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(25.924503,-97.489405),14);
// Set up the marker and info
var point = new GLatLng(25.924503,-97.489405);
var marker = createMarker(point, html)
map.addOverlay(marker);
marker.openInfoWindowHtml(html);
}
// display a warning if the browser was not compatible
else {
alert(“Sorry, the Google Maps API is not compatible with this browser”);
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
}
</script>
{/literal}
{literal}
<script type=”text/javascript”>
window.onload= function(){
display_map();
};
window.onunload= function(){
GUnload();
};
</script>
{/literal}
<!– Google Maps code end –>
References
gMap:
http://code.google.com/apis/maps/documentation/javascript/tutorial.html
http://gmap3.net/
Google Map Sensor Parameter
http://code.google.com/apis/maps/documentation/javascript/basics.html
http://stackoverflow.com/questions/1993978/how-do-i-use-the-google-maps-api-gps-sensor
Maofree (maofree_contactform):
http://www.maofree-developer.com
NethercottConstructions (creating a basic module):
http://www.nethercottconstructions.com/en/content/category/11-creating-a-basic-module