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 — наибольший.

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