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

The post Google Map v3 API Prestashop Module appeared first on My Web Development.