Google maps salahsatu hal yang dianggap penting untuk sebagian kalangan marketing internet e-commerce, selain dari petunjuk arah, google maps juga bisa meningkatkan kepercayaan lebih untuk setiap pengunjung, kali ini saya mencoba memasang google maps pada prestashop v.1.4, saya taruh tepat di bagian page "contact us", awalnya saya merasa kesulitan untuk memasang google maps pada halaman prestashop, memang sebenarnya da block modules khusus untuk google maps tapi itu berbayar, berikut cara yang saya gunakan untuk memasang google map pada prestashop v.1.4
masuk ke cpanel hosting anda, ( themes/contact-forum.tpl ) kemudian download file contact-forum.tpl dan salin backupannya untuk jaga-jaga, kemudian buka file contact-forum.tpl dengan menggunakan text editor!! saya menggunakan WordPad. cari tulisan <h2>{l s='Contact us'}</h2
Step 2
copy code dibawah ini dan paste tepat diabaha tulisan <h2>{l s='Contact us'}</h2
<!-- Google Maps code start -->
{literal}
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=MASUKAN_KEY_API_NDA" type="text/javascript"></script>
<div id="map" style="width: 100%; height: 300px"></div>
<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;\">Nama Bisnis Anda<br />Alamat 1<br />Alamat 2<br />Phone: 12345678<\/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(40.728848,-73.995645),16);
// Set up the marker and info
var point = new GLatLng(40.728848,-73.995645);
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 -->
Step 3
Ganti angka Koordinat yang di cetak tebal "map.setCenter(new GLatLng(40.728848,-73.995645),16);" dan "var point = new GLatLng(40.728848,-73.995645);"
masukan data toko anada pada bagian tulisan yang di cetak tebal dibagiantulisa:
html ="<div style=\"width:250px; text-align: left;\">Nama Bisnis Anda<br />Alamat 1<br />Alamat 2<br />Phone: 12345678<\/div>";
setalah selesai edit & svae kemudian ulpload kembalai pada directory yang sama!!
