Продвинутая страница контактов

    <?php // Присваиваем нужный адрес. Например адрес оффиса.
          // Постарайтесь указать адрес как можно точнее чтобы небыло сбоя.
          $office_address = 'г. Пермь, ул. Пермская 200';
          // Используя Yandex.Maps API мы получаем широту и долготу данного адреса.
          // Получаем в формате json а заместо curl используем drupal_http_request();
          $json = drupal_http_request('http://geocode-maps.yandex.ru/1.x/?format=json&geocode=' . $office_address . '&result=1');
          // Данные из результат записываем в отдельную переменную.
          $result = json_decode($json->data);
          // Получаем широту и долготу из ответа.
          $coordinates = $result->response->GeoObjectCollection->featureMember[0]->GeoObject->Point->pos;
          // Разбиваем строку чтобы получить массив.
          $coordinates_array = explode(" ", $coordinates);
          // Соденияем широту и долготу в нужном порядке (сначала 1, потом 0), а также разделяем запятой а не пробелом.
          // Дальше с этими координатами мы будем работать.
          $coordinates_ready = $coordinates_array['1'] . "," . $coordinates_array['0'];
          // Передаем наши координаты в JS.
          drupal_add_js(array('coordinates' => $coordinates_ready), 'setting');
          // Подключаем Yandex.Maps API.
          drupal_add_js('http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU');
          // Подключаем JS с которой будем работать далее.
          drupal_add_js(drupal_get_path('theme', 'corolla') . '/js/script.js');
    ?>

<div id="map"></div>
      <div id="map-route">
        Укажите свой адрес и мы покажем как до нас доехать:<br></br><input id="map-route-address" type="text" value="Пермь, "></input>
        <input id="map-start-route" type="button" value="Показать путь"></input>
     </div>

    (function($, Drupal) {
      $(document).ready(function() {
        // Забиваем координаты офиса в переменную. Координаты передаются друпалом.
        var coordinates = Drupal.settings.coordinates.split(',');
        // Создаем пустую глобальную переменную для маршрутов.
        var router;
    
        // Инициализируем Yandex карты.
        ymaps.ready(init);
    
        function init () {
          // Создаем карту
          var myMap = new ymaps.Map("map", {
            center: coordinates, // Координаты центра карты, в нашем случае офиса.
            zoom: 14
          }),
    
          // Добавляем на карту метку, опять же на координаты офиса.
          myPlacemark = new ymaps.Placemark(coordinates);
          myMap.geoObjects
            .add(myPlacemark);
    
          // Добавляем элементы управления картой. В нашем случае зум со смещением.
          myMap.controls
            .add('zoomControl', { left: 20, top: 160 }); 
               
          // Обрабатываем нажатие на показ маршрута от указанного пути.     
          $("#map-start-route").click(function() {
            // Присваевыем текущее значение поле адреса.
            var route_address = $("#map-route-address").val();
                      
            // Генерируем маршрут.
            ymaps.route([
              route_address, // Адрес откуда отправляемся.
              coordinates    // Адрес куда отправляемся (наш офис).
            ], {
              mapStateAutoApply: true // Автозум под дистанцию.
            }).then(function (route) {
              // Если уже ранее был проложен маршрут, мы его удаляем чтобы небыло
              // наложения маршрутов и путанницы.
              if (router) myMap.geoObjects.remove(router);
              // В нашу переменную присваиваем маршрут переданный яндексом.
              router = route;
              // Прорисовываем маршрут на карте.
              myMap.geoObjects.add(router);
              // Получаем точки маршрута.
              var points = route.getWayPoints();  
              // Указываем что бабл будет красного цвета.
              points.options.set('preset', 'twirl#redStretchyIcon');
              // Устанавливаем иконку и текст в ней для стартового маршрута.
              points.get(0).properties.set('iconContent', 'Ваше местоположение');
              // Устанавливаем иконку на наше местоназначение.
              points.get(1).properties.set('iconContent', 'Мы здесь!');
            }, function (error) {
              // Выводим ошибку, если такая возникла. Например если путь хотят
              // проложить через океан.
              alert("Возникла ошибка: " + error.message);
            });
          });   
        }
      })
    })(jQuery, Drupal);

    #map {
      height: 550px;
      position: relative;
      margin-bottom: 50px;
      border: 1px solid #B0B0B0;
    }
    
    #map-route {
      position: absolute;
      bottom: -1px;
      left: -1px;
      background: white;
      padding: 7px;
      z-index: 501;
      border-top-right-radius: 6px;
      border: 1px solid #B0B0B0;
      border-bottom: none;
      border-left: none;
    }