Add Google Maps to Zen Cart contact page (easier method)

December 1, 2010 in Zen Cart Customization, Zen Cart Guides

Is this useful? Like it.

A guide on adding Google Maps to the Zen Cart contact page was already posted on August 4, 2009. That earlier guide requires the modification of TWO template files.

Today’s guide will provide you with the steps to achieve the same result, but requires you to edit only ONE template file.

Screenshot - Google Maps

The only file involved is tpl_contact_us_default.php.

STEP 1

Copy the tpl_contact_us_default.php file from your default template to your custom template:

Download this file from your server to your computer:
\includes\templates\template_default\templates\tpl_contact_us_default.php

Upload the file to:
\includes\templates\CUSTOM_TEMPLATE\templates\tpl_contact_us_default.php

Now, check that your contact page still works as usual in the web browser.

Note: CUSTOM_TEMPLATE is the folder name of the template you are using.
Note: If you already have the tpl_contact_us_default.php file in your CUSTOM_TEMPLATE folder, don’t overwrite it. Skip directly to Step 2.

STEP 2

Open the  tpl_contact_us_default.php file on your computer with a text editor (do not use WYSIWYG editors, use a pure text editor, like PSPad or Notepad++):

STEP 3

Download the maps code here.

Then unzip and open the text file, copy all lines and paste to your tpl_contact_us_default.php file. Paste to around line 48. See screenshot example below.

Screenshot - Maps code

STEP 4

Changes that MUST be done to your tpl_contact_us_default.php file:

  1. 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)
  2. Copy and paste the key — replace the text YOUR_API_KEY_HERE with your key (around line 50)
  3. Get the exact latitude/longitude of your business location at http://www.gorissen.info/Pierre/maps/googleMapLocation.php
  4. Replace the (latitude,longitude) data (two locations — around line 90 and 95).
  5. Change the business name/details (around line 75).
  6. Upload the tpl_contact_us_default.php file to the correct folder:
    \includes\templates\CUSTOM_TEMPLATE\templates\tpl_contact_us_default.php

Optional changes (tpl_contact_us_default.php)

  1. Around line 53, you can see the declaration for the width and height of the map. Change to suit.
  2. Around line 90, you can see the zoom level of the map is set to 16, map.setCenter(new GLatLng(40.728848,-73.995645),16);
    Set to a zoom level you prefer, with 0 being the coarsest level.

Compatibility: Zen Cart 1.3.8, 1.3.9
Database patches: None
Core files modification: None
Browsers tested: Firefox, Chrome, IE6, IE7, IE8, Safari, Opera

Premium Zen Cart templates from $19 only. Guaranteed unbeatable value! Give your business an advantage over others! Click to see now!

Bookmark and Share

Comments

One Response to “Add Google Maps to Zen Cart contact page (easier method)”

  1. Wholesale Nursery on July 18th, 2011 12:57 pm

    “Interesting”I really enjoyed your blog post, i always got good, relevant and useful information from your new and unique posts, i m sure your blog will keep us continues update. Thanks for providing us such useful information..

Leave a Reply





3 + seven =


Zen Cart Templates

Premium 1 Series ($19~22)

Premium 2 Series ($23)

Premium 3 Series ($25)

Premium 4 Series ($25)

Premium 5 Series ($26)

Premium 6 Series ($26)

Premium 7 Series ($28)

Premium 8 Series ($37)

Premium 9 Series ($33)

7 Days A Week E-mail Support