Add Google Maps to Zen Cart contact page

August 4, 2009 in Zen Cart Customization

Is this useful? Like it.

UPDATE: Please see our new tutorial on adding Google Maps to Zen Cart contact page. The new tutorial requires the edit of only ONE template file.

To add Google Maps to your Zen Cart contact page, two files need to be uploaded to your template folders.

Basically, you just need to download the files, change the details to reflect your business location/address, and upload.

For your convenience, I’ve separated the guide below to 3 major steps (STEP 2 is only necessary if the files already exist in your template’s folders).

Screenshot

Screenshot

STEP 1

Download the archive and extract to your computer — There are only two files involved (no database changes needed):

Note: CUSTOM_TEMPLATE is the name of the template you are using.
Note: DO NOT overwrite any of your template files, else you may break the layout of the template you’re currently using.

STEP 2

If none of the files downloaded here clash with your files, skip to STEP 3.

But If the same files already reside in your custom template’s folders, you must download these files from your own server and edit them first, as shown below, then proceed to STEP 3. In other words, DO NOT use my files to overwrite any of your template files — edit your own files, then upload.

If tpl_main_page.php is already in your \includes\templates\CUSTOM_TEMPLATE\common\ folder:

  1. Open your tpl_main_page.php file, then delete the line with the “body” tag (around line 53).
  2. Open the tpl_main_page.php file downloaded from here, then copy the block of code commented with “Google Maps – edited body tag” (from line 54 to line 65).
  3. Paste to your own tpl_main_page.php exactly where you deleted the “body” tag line just now.

If tpl_contact_us_default.php is already in your \includes\templates\CUSTOM_TEMPLATE\templates\ folder:

  1. Open the tpl_contact_us_default.php file downloaded from here, copy the block of code commented with “Google Maps…” (from line 46 to line 116).
  2. Paste to your own tpl_contact_us_default.php file — at around the same location.

STEP 3

Changes that MUST be done to tpl_contact_us_default.php:

  1. Open the tpl_contact_us_default.php file, in 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 — replace the text YOUR_API_KEY_HERE with your key (line 50)
  4. Get the exact latitude/longitude of your business location at http://www.gorissen.info/Pierre/maps/googleMapLocation.php
  5. Replace the (latitude,longitude) data (two locations — line 90 and 94).
  6. Change the business name/details (line 76).
  7. Upload the 2 files to the correct folders as shown in STEP ONE.

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.

Download for Zen Cart 1.3.9: googlemaps_zencart_1.3.9.zip
Download for Zen Cart 1.3.8: googlemaps_zencart_1.3.8.zip
Database Patches: None
Core files modification: None
Browsers tested: Firefox, Chrome, IE6, IE7, IE8, Safari, Opera

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

Bookmark and Share

Comments

8 Responses to “Add Google Maps to Zen Cart contact page”

  1. Website Design Service on August 17th, 2009 3:39 pm

    This would be a great help, putting the physical address of the business establishment by the use of google maps is a big plus for the users and customers online.

  2. Francis on September 1st, 2009 6:40 pm

    Useful to know but I seem to get very little out of optimisation regarding my cart system.

  3. tryy on November 14th, 2009 4:00 am

    very helpful for me, thx.

  4. Jiali Xia on December 8th, 2009 1:27 pm

    I use the code to put on my website, it looks good
    Thanks.

    http://marketcity.net.au/medianet/index.php?main_page=contact_us

  5. Stefano on March 2nd, 2010 9:19 am

    What, if I want to put the map into the homepage? What do I have to change?

  6. admin on March 2nd, 2010 11:06 am

    Stefano,

    You can try to download, see the code I’ve added in tpl_contact_us_default.php …. take the maps code and put into define_main_page.php instead.

  7. Charlie Kalech on December 1st, 2010 5:44 pm

    We followed directions on http://www.zenflavor.com/add-google-maps-to-zen-cart-contact-page.html for Zen Cart 1.3.8, we are using Zen Cart 1.3.8a

    Edited Body tag in /home/archiegr/www/includes/templates/archie/common/tpl_main_page.php

    Embedded Google Map Code in /home/archiegr/www/includes/templates/archie/templates/tpl_contact_us_default.php

    However, this just created a space defined by the DIV and DID NOT EMBED THE MAP

    Div is not calling in map and just creating space defined by height and width

    Any suggestions?

    See https://www.archiegranot.com/contact-us.html

  8. admin on December 1st, 2010 7:02 pm

    Charlie Kalech,

    Your “body” tag is not calling the “display_map” function. Check your tpl_main_page.php file.

    Or look at our new tutorial, which requires the modification of only ONE template file.

Leave a Reply





Zen Cart Templates

Premium 1 Series ($22~25)

Premium 2 Series ($26)

Premium 3 Series ($29)

Premium 4 Series ($28)

Premium 5 Series ($30)

Premium 6 Series ($30)

Premium 7 Series ($35)

Premium 8 Series ($40)

Premium 9 Series ($35)

7 Days A Week E-mail Support