ZenCart. How to insert Google map on the Contacts page

This tutorial will show you how to insert Google map on the Contacts page in ZenCart:

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\themeXXX\templates\ folder

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

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

2. Open the tpl_contact_us_default.php file on your computer with any code editor available (Notepad++, PSPad, DreamWeaver, etc.) and paste the following code to around line 54:

   

3. Changes that should be done to your tpl_contact_us_default.php file are the following:

   Get your API key from Google — visit the APIs Console at http://code.google.com/apis/console and log in with your Google Account details and get the key (it’s a long line of random characters).

   Click the Services link from the left-hand menu and activate the Google Maps JavaScript API v3 service.

   Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section.

   Copy and paste the key — replace the text YOUR_API_KEY_HERE with your key (around line 55). Get the exact latitude/longitude of your business location at http://www.gorissen.info/Pierre/maps/googleMapLocation.php and replace it around line 95. Change the business name/details (around line 80):

   

   When you’ve finished editing the tpl_contact_us_default.php file, upload it to the correct folder: \includes\templates\themeXXX\templates\tpl_contact_us_default.php.

4. Around line 57, you can see the declaration for the width and height of the map, change it to suit your needs. Around line 95, you can see the zoom level of the map set to 16, map.setCenter(new GLatLng(40.728848,-73.995645),16); Set it to a zoom level you prefer, with 0 being the coarsest level.

Feel free to check the detailed video tutorial below: