ZenCart. Як додати карту Google на сторінку контактів

Даний туторіал покаже, як додати карту Google на контактну сторінку в ZenCart:

1. Скопіюйте файл tpl_contact_us_default.php зі стандартної теми в поточну.

   Скачайте файл з сервера на комп'ютер: \ includes \ templates \ template_default \ templates \ tpl_contact_us_default.php.

   Завантажте його в папку: \ includes \ templates \ themeXXX \ templates \ на сервері

   У браузері зовнішній вигляд контактної сторінки не змінився.

   themeXXX - це назва папки використовуваного шаблону. Якщо там вже знаходиться файл tpl_contact_us_default.php, тоді перезаписувати його не потрібно. Відразу переходьте до пункту 2.

2. Відкрийте файл tpl_contact_us_default.php на комп'ютері в будь-якому кодовому редакторі (Notepad ++, PSPad, DreamWeaver, і т.п.) і додайте наступний код приблизно на рядку 54:

   <Script src = "http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=YOUR_API_KEY_HERE" 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; \ "> Business Name <br /> Address line 1 <br /> Address line 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> <script type = "text / javascript"> window.onload = function () {display_map (); }; window.onunload = function () {GUnload (); }; </ Script>

3. Необхідно зробити наступні зміни в файлі tpl_contact_us_default.php:

   Отримайте ключ API від Google - відкрийте консоль APIs на сайті http://code.google.com/apis/console і увійдіть в свій профіль Google, після чого отримаєте ключ (довга рядок випадкових чисел).

   Перейдіть по посиланню Services (Послуги) в меню зліва і активуйте послугу Google Maps JavaScript API v3.

   Натисніть посилання API Access (Доступ API) в меню зліва. Ключ API знаходиться на сторінці доступу API, в розділі Simple Access (Звичайний доступ API).

   Скопіюйте ключ і замініть текст YOUR_ API _KEY_HERE (приблизно рядок 55). Отримайте точну широту / довготу магазину http://www.gorissen.info/Pierre/maps/googleMapLocation.php і задайте приблизно на рядку 95. Відредагуйте назву / деталі магазину (приблизно рядок 80):

   

   Після того, як відредагуєте файл tpl_contact_us_default.php, завантажте його в правильну папку: \ includes \ templates \ themeXXX \ templates \ tpl_contact_us_default.php.

4. Приблизно на рядку 57 можна знайти і поміняти настройки ширини і висоти карти. Приблизно на рядку 95 знаходиться величина зума для карти - 16, map.setCenter (new GLatLng (40.728848, -73.995645), 16); Виставте потрібний рівень зуму, 0 - найбільший.

Ви також можете подивитися детальний відео туторіал: