Categories

Новые шаблоны

ZenCart. Как добавить карту Google на страницу контактов

Harry Baker Ноябрь 19, 2014
Rating: 5.0. From 2 votes.
Please wait...
ZenCart. Как добавить карту Google на контактную страницу

Данный туториал покажет, как добавить карту Google на контактную страницу в ZenCart:

ZenCart-How-to-insert-Google-map-on-the-Contacts-page1.jpg
  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:

    ZenCart-How-to-insert-Google-map-on-the-Contacts-page2.jpg
    <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):

    ZenCart-How-to-insert-Google-map-on-the-Contacts-page3.jpg

    После того, как отредактируете файл 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 — наибольший.

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

ZenCart. Как добавить карту Google на контактную страницу
Эта запись была размещена в ZenCart туториалы и помечена как contact, google, map, ZenCart. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов

Чат
We help you to choose the right product.