Rabu, 25 Mei 2011

Memasang Google Maps di Prestashop

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

Step 1
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&amp;v=2&amp;sensor=false&amp;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 tulisan MASUKAN_KEY_API_NDA dengan kode key anda, untuk mendapatkan kode key API silahkan klik http://code.google.com/apis/maps/signup.html

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);"
dengan koodita peta anda. untuk mendaptkan titik koordinat silahkan klik http://www.gorissen.info/Pierre/maps/googleMapLocation.php

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!!
Copyright © 2012 internet-ujicoba All Right Reserved
Blog z-inc blog