Add Google Maps to contact page

To add or embed Google Maps to your PrestaShop contact page, only one file needs to be edited and uploaded to your theme folder.

Add Google Maps to your site’s contact page will provide convenience to your potential customers. Also, putting a map and physical address will give more confidence to those who are considering to buy merchandise from you.

add or embed Google Maps to your PrestaShop

STEP 1 – Download

  1. Click here to download the zipped contact-form.tpl file.
  2. Unzip the contact-form.tpl file to any location on your computer.

STEP 2 – Editing

  1. Open the contact-form.tpl file with any text editor.
  2. Get your API key from Google — Go to http://code.google.com/apis/maps/signup.html, enter your domain and get the key (it’s a long line of seemingly random characters).
  3. Copy and paste the key to contact-form.tpl — replace the text YOUR_API_KEY_HERE with your key (line 8).
  4. Get the exact latitude/longitude of your business location at http://www.gorissen.info/Pierre/maps/googleMapLocation.phpScroll and zoom in as close as possible to get the accurate position.
  5. Replace the (latitude,longitude) data (two locations — line 48 and 52).
  6. Change the business name/details (line 34).
  7. Save the file and upload to your theme folder:  \themes\YOUR_THEME\contact-form.tpl — It’s recommended that you download and backup a copy first before overwriting.
  8. That’s it. Open your PrestaShop site’s contact page in any browser and see the result.

CAUTION:
When you paste the Latitude and Longitude data, make sure you follow the order (Latitude, Longitude).

IMPORTANT NOTE:
The file above is for PrestaShop 1.3 and PrestaShop 1.3.1. If you have any other older or newer version of PrestaShop, you can download the file, then copy the lines of code between <!– Google Maps code start –> and <!– Google Maps code end –>, then paste to your own contact-form.tpl file at about the same location.

Browser compatibility: Tested with Firefox, Google Chrome, Opera, Safari, IE6, IE7 and IE8.

Original Post

affiliate_link
Share this Post:
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

2 Responses to “Add Google Maps to contact page”

Trackbacks are disabled.

  • Alison says:

    never mind i saw that the css code for the text in the marker was missing the text color. without this it only showed up in white

  • Guy Storms says:

    Hi, I tried to get this working and it does show up in the contact page. It also shows the pointer and the address as wel as the zoom and navigation arrows. But I can’t see the map itself. It’s a grayish square, nothing else. I’m working in Prestashop 1.3.6 and copied the code into the contact_form.tpl as described. What’s wrong?