SOBI2 и карты

[PREMIER]

Приветствую. Есть необходимость сделать на SOBI2 пару каталогов, в том числе и каталог недвижимости. Специальные компоненты для недвижимости изучил, всё там интересно, но не то что нужно под мои задачи, а вот SOBI2 полностью подходит, нужно будет конечно вывод подправить, но это не страшно. Основная проблема-заморочка тут с картами. Естественно при продажи недвижимости и земли (лесов, полей и рек) часто очень нужно указать где это всё находится на карте. Есть встроенная функция работы с Google Maps, но из того что освоил я, мне показалось, что там не достаточно удобно сделано. Так же интересна интеграция карт Яндекса.

Информации различной достаточно, но есть в ней разрозненность и вот я решил пока разбираюсь сам, в рамкой этой темы чуть упорядочить информацию для потомков.

Пропускаю (пока), моменты скачки и русификации компонента. Переходим к картам.

1. Встроенная функция Google Maps

Чтобы она включалась и заработала я сделал следующие:

1. Создание полей для Широты и Долготы

Зашёл Компоненты -> Sigsiu Online Business Index 2 -> Общие параметры -> Настройка полей

Там нажал на кнопку "Добавить новое поле" и создал новое поле со следующими параметрами:

Код:

Название поля - field_latitude
Заголовок поля - Широта
Тип поля - inputbox
Опубликовано - Да
Административное поле - Нет
Описание поля - пока не какого описания не делал
Использовать визуальный редактор - Нет
Класс CSS - inputbox
Добавить новую строку - Да
Отображать поле - Нет
Предпочитаемый размер - 10
Максимальная длина - 15
Строк - 0
Колонок - 0
Обязательное - Да
Бесплатное - Да
Цена - 0,00 (ну это это понятно раз выше бесплатно указал)
Отображать поле - Скрытое
Интернет ссылка - Нет
Способ поиска - Нет

Нажал "Сохранить", а потом создал ещё одно поле с теми же параметрами что и выше, только с отличием в обозначении:

Код:

Название поля - field_longitude
Заголовок поля - Долгота

2. Регистрация и получение ключа к API

Зашёл по ссылке http://code.google.com/intl/ru/apis/maps/signup.html

Там я для того чтобы получить ключ к API Карт Google, прочитал (пролистал), внизу я сказал, что "Я ознакомлен и согласен с условиями и положениями", ввел адрес своего сайта, нажал на кнопку "Сгенерировать ключ к API". Открылось новое окно, всё там было написанно я на всякий случай сохранил, но для дальнейших манипуляций нам понадобится собственно данные из поля "Your key is:", что-то типа "ABQIAAAAKX-1S59qT-IwH_5quFrcRRTSdatOO8Erfl7_pkXTjrwzucL-BxQIc5MYo23UEcneU6x_S-jCPXiv_w" - но у вас будет свой.

3. Включение и настройка функции Google Maps

Зашёл Компоненты -> Sigsiu Online Business Index 2 -> Общие параметры -> Параметры отображения -> Вкладка Google Maps

Там:
 

Код:

Отображать Google Maps - Да
API ключ - вставил выше приведенный ключ полученный с http://code.google.com/intl/ru/apis/maps/signup.html
Ширина карты - это как вам надо, мне надо 500
Высота карты - тоже как вам надо, мне надо 250
Поле для значения широты карты - field_latitude
Поле для значения долготы карты - field_longitude
Информационное окно - это как вам надо, я поставил Нет (зачем это позже расскажу)
Масштаб увеличения - тут масштаб который нужен вам, мне подошёл 6

Нажал "Сохранить"

Всё встроенную в SOBI2 функцию Google Maps мы активировали.

Информация (размышления) приведённая в окне ниже устарела, в связи с получением новой информации

Тут начинаются не удобства, например при создании новой записи в компонентах по продаже недвижимости, выбор места на карте производится прямо на гугл карте, где находится объект, на него ставится указатель, выбирается способ показа (Карта, Ландшафт и т.д.), масштаб, сохраняешь и пользователю прямо так и выводится всё. Тут у нас при создании новой записи есть просто два поля: Широта и Долгота. И даже ни какой ссылки, чтобы перейти на Google Maps и там найти нужные широту и долготу.

Я открываю в соседнем окне http://maps.google.ru/, ищу нужное место, нажимаю на правую кнопку, в выпадающем меню выбираю "Как проехать от сюда" слева открывается новый фрэйм, там в значении "А" (от куда) находятся координаты, например 54.972224, 73.393450, беру 54.972224 вставляю в поле Широта, 73.393450 - Долгота. Ввожу, все другие необходимые данные. Нажимаю "Сохранить".
Захожу, смотрю что получилось. Выводится карта, с нужными координатами, но с одним и тем же увеличением, нельзя для каждого отдельного случая самостоятельно выбирать увеличение. Вижу что нету кнопок выбора отображения (Карта, Ландшафт, Спутник) и при создании записи нельзя было выбрать режим отображения.

Вопрос 1: Можно ли как-то улучшить встроенную функцию работы с Google Maps, чтобы это было удобно как например в Estate Agent Improved, чтобы при создании записи, как представители администрации, так и простые пользователи могли бы указать на гугловой карте место нахождения объекта, вид отображения, увеличение, нажать сохранить и потом чтобы так всем и выводилось, кроме того выводилось и предоставляло возможность переключать режимы вывода, если например автор указал Спутник, а ты захотел посмотреть на карту или ландшафт, то просто нажал нужную кнопку и всё?

Ответ на Вопрос 1 (подсказал AndreiSm)

Получается, что я не создал ещё третьего поля, в демонстрационном примере на http://joomla.sigsiu.net/ к сожалению третьего поля с картой нет. Добавляю к выше изложенному описанию пункт 4.

4. Создание нового поля для вывода карты при создании записи

Позже опишу более подробно, а пока вот ссылки на официальный сайт:

http://www.sigsiu.net/faq/how_to_fetch_geo_coordinates_in_add_edit_entry_form_by_map.html
http://www.sigsiu.net/faq/how_to_use_tabs.html

[mystique]

С июля так и не появилось "более подробно". На всякий случай распишу для тех, кто не знает английский.

Работать эта функциональность начинает с версии RC 2.7.2

Общее решение:

    * Получить и записать полученный Google API Key в настройках  (View Configuration->Google Maps)
    * Создать поле 'field_longitude' и поле 'field_latitude' для географической долготы и широты (View Configuration->Google Maps)
    * Создать поле 'field_map', имеющее тип "text code", в которое вставить следующий скрипт, указанный ниже.
    * Magic Quotes (magic_qotes_gpc) has to be set to on! (Так и не понял толком, что это такое имеется ввиду. Не делал. Без этого тоже работает.)


Вставляемый скрипт:

Код:

<script src="http://maps.google.com/maps?file=api&v=1&key={googleApiKey}" type="text/javascript"></script>;
 
<div id="map" style="width: 400px; height: 300px"></div>
 
<script type="text/javascript">
    //<![CDATA[
 
    var start_latitude = "52.4777619318499";
    var start_longitude = "-1.89788818359375";
    var zoomlevel_add = 11;
    var zoomlevel_edit = 3;
 
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
 
  var latitude = document.getElementById('field_latitude').value;
  if (latitude == "")
    latitude = start_latitude;
  var longitude = document.getElementById('field_longitude').value;
  if (longitude == "")
    longitude = start_longitude;
  if (latitude == start_latitude)
     zoomlevel = zoomlevel_add;
  else
     zoomlevel = zoomlevel_edit;
 
    // center and zoom to the lat/long in the form
    map.centerAndZoom(new GPoint(longitude,latitude), zoomlevel);
 
    GEvent.addListener(map, 'click',
        function(overlay, point) {
            if (point) {
                document.getElementById('field_latitude').value = point.y;
                document.getElementById('field_longitude').value = point.x;
            }
        }
    );   
//]]>
</script>

По желанию можно поменять стартовые значения переменных:
zoomlevel_add - стартовый уровень масштабирования при добавлении новой точки
zoomlevel_edit - стартовый уровень масштабирования при редактировании существующей точки
start_latitude, start_longitude - стартовые координаты позиционирования карты

Также можно изменить размеры экранчика в самом первом DIV-е (изначально заданы на 400px x 300px).

[mystique]

После всего проделанного - заработало. Но остался маленький, но очень важный косячок. Во всяком случае у меня. Не знаю, как у других. При отображении объекта карта отрабатывает на все 100%. Но при добавлении нового и редактировании уже существующего - карты нет. Рамка положенного ей размера есть, надпись Powered by Google, кнопки управления картой... А самой карты нет. ;( Подскажите пожалуйста, в чем проблема?


PS
Ссылочка на работающий просмотр объекта.
Дал права гостям (незарегистрированным) на создание записей. Можно посмотреть на карту при добавлении точки...

[PREMIER]

mystique ну вот и появилось продолжение  ... сейчас ближе к новому году когда вернусь к этой теме, напишу новые мысли, а пока кому есть что написать пишите.

[mystique]

Я старался... В плане - продолжение набросать.

Только вот до нового года  - это так долго... Очень бы хотелось понять, почему один и тот же скрипт в просмотре отображает карту нормально, а вот при добавлении/редактировании - косячит. ;((( Даже не знаю, с какой стороны к этой проблеме подойти... ;(  !

[Lord Glue]

Но при добавлении нового и редактировании уже существующего - карты нет. Рамка положенного ей размера есть, надпись Powered by Google, кнопки управления картой... А самой карты нет. ;( Подскажите пожалуйста, в чем проблема?

Уважаемый, я в 3 секунды нашел вашу проблему..... поле у вас называется field_lat,
а в карте ясно написано, что поле должно называться field_latitude
А на будущее firefox+firebug Вас спасут
PS Денег, поцелуев, славы не надо

[mystique]

Чйорт побъери! Сказываются долгие годы работы программером на оборонку. В том числе и с картографией.  Поля именовали у нас просто lat и lon.

Действительно заработало. Нужно внимательнее смотреть на именования полей.

Ну по крайней мере не зря этой штукой занялся. Зато продолжение инструкций набросалось.

[lukum]

Все сделал как тут сказано, но остался один вопросик: Нужно вводить координаты широты и долготы для каждой фирмы отдельно? А нельзяли ,что бы расположение выхватывалось из параметров которые заданы в адресе этой фирмы?

[mystique]

В общем случае - нужно вводить. А точнее - тыкнуть мышкой в карту.

Но если вы хотите, чтобы координаты подставлялись автоматически, то вот вам темка, в которой подробно рассказано, как так сделать.
http://joomlaforum.ru/index.php/topic,77777.0.html

[mystique]

А вот другая проблемка с картой. Нужно поставить не точку, а нарисовать область... Возможно, с ограниченным числом точек. (Конкретно - обвести периметр площадных объектов. В моем случае - города).

Как это можно реализовать? Добавить полей с координатами и вытаскивать конкретные точки на каждый клик? Как-то не совсем логично и интуитивно понятно для пользователя получается... ;(

[Lord Glue]

ну посмотрите Google map api - там ребята чего только не придумали.
Вдруг в примерах будет что-то подходящее

[mystique]

Смотрел. В принципе про области там есть. Но нужно где-то хранить их координаты. Толи пользоваться SOBI-полями, толи делать свою скрытую табличку с множеством координат... Толи вдруг еще какие решения несложные есть?

[liberator]

спасибо за вариант реализации, предложу еще один:
1. Зайди в Конфигурация-Управление пользовательскими полями.
2. Создать 2 поля типа inputbox:
- имя поля field_latitude, метка поля Latitude, css-класс inputbox.
- имя поля field_longitude, метка поля Longitude, css-класс inputbox.
3. Создать одно поле типа text code:
- имя поля field_fetchcoordinates, метка поля Fetch coordinates,
text code:

Код:

<script type="text/javascript" language="JavaScript">
/* adjust here the field names if they are not correct */
var apiKey = "{googleApiKey}";
var cityField = 'field_city';
var houseField = 'field_house';
var streetField = 'field_street';
var latitudeField = 'field_latitude';
var longitudeField = 'field_longitude';
 
function fetchCoordinates() {
/* here you should not change anything  */
var gRequest = null;
var city = document.getElementById(cityField).value;
var street = document.getElementById(streetField).value;
var house = document.getElementById(houseField).value;
 
{
var gRequest = "http://maps.google.com/maps/geo?q=" +city+ "+" +street+ "+" +house+ "&callback=getCoordinates&output=JSON&key="+apiKey;
var scriptObj = document.createElement("script");
scriptObj.setAttribute("type", "text/javascript");
scriptObj.setAttribute("src", gRequest);
document.getElementsByTagName("head").item(0).appendChild(scriptObj);
}
}
function getCoordinates(data) {
switch(data.Status.code) {
case 610:
/* you can change the error message here */
alert("Api key not valid: {googleApiKey}");
break;
case 603:
case 602:
case 601:
case 500:
/* you can change the error message here */
alert("Cannot get coordinates for this address");
break;
case 200:
document.getElementById(latitudeField).value = data.Placemark[0].Point.coordinates[1];
document.getElementById(longitudeField).value = data.Placemark[0].Point.coordinates[0];
break;
}
}
</script>
<!-- You can change the "value" (The label on the button) here -->
<input type="button" class="button" onclick="fetchCoordinates();" value="Fetch Coordinates"/>

[liberator]

вариант реализации близкий к первому, только код немного другой.
http://www.sigsiu.net/forum/index.php?action=profile%3Barea=showposts%3Bu=6030

Код:

<script type="text/javascript" language="JavaScript">
/* adjust here the field names if they are not correct */
var apiKey = "{googleApiKey}";
var postalCodeField = 'field_postcode';
var cityField = 'field_city';
var streetField = 'field_street';
var countryField = 'field_country';
var latitudeField = 'field_latitude';
var longitudeField = 'field_longitude';
 
function fetchCoordinates() {
  /* here you should not change anything  */
  var gRequest = null;
  var postalcode = document.getElementById(postalCodeField).value;
  var city = document.getElementById(cityField).value;
  var street = document.getElementById(streetField).value;
  var country = document.getElementById(countryField).value;
 
  if(postalcode == '' || city == '' || street == '' || country == '' ) {
    /* you can change the error message here */
    alert("Please fill in the address fields first");
  }
  else {
    var gRequest = "http://maps.google.com/maps/geo?q=" +street+ "+" +postalcode+ "+" +city+ "+" +country+ "&callback=getCoordinates&output=JSON&key="+apiKey;
    var scriptObj = document.createElement("script");
    scriptObj.setAttribute("type", "text/javascript");
    scriptObj.setAttribute("src", gRequest);
    document.getElementsByTagName("head").item(0).appendChild(scriptObj);
  }
}
function getCoordinates(data) {
  switch(data.Status.code) {
    case 610:
      /* you can change the error message here */
      alert("Api key not valid: {googleApiKey}");
      break;
    case 603:
    case 602:
    case 601:
    case 500:
      /* you can change the error message here */
      alert("Cannot get coordinates for this address");
      break;
    case 200:
      document.getElementById(latitudeField).value = data.Placemark[0].Point.coordinates[1];
      document.getElementById(longitudeField).value = data.Placemark[0].Point.coordinates[0];
      break;
  }
}
</script>
<!-- You can change the "value" (The label on the button) here -->
<input type="button" class="button" onclick="fetchCoordinates();" value="Fetch Coordinates"/>
 

[SyncMaster]

2. Создать 2 поля типа inputbox:
- имя поля field_latitude, метка поля Latitude, css-класс inputbox.
- имя поля field_longitude, метка поля Longitude, css-класс inputbox.

Sigsiu Online Business Index 2 Full ChangeLog List
RC 2.9.2.2 (Thu, 30 Jul 2009)
+ Add: (J!1.5 only) Fields for longitude and latitude are added on fresh installation

[mystique]

Сначала удивился, что с июля эта правка уже есть, а у меня ее не было. Хотя ставил свежую версию. А потом увидел, что это только под 1,5 джомлу и успокоился. У меня-то 1.0.15

[alexandro]

Спасибо за инструкцию, благодаря ей сделал.
При просмотре детально карта показывается и точка на карте отмечается. А вот как сделать чтобы в режиме добавления записи и её редактирования показывалась точка на карте. А то карта отображается правильно, но где именно объект никак не отмечается

Скрипт использую от mystique.

[alexandro]

Кстати, а примеров для вывода несколько точек на карте, например для одной категории никто не видел?

[SyncMaster]

Кстати, а примеров для вывода несколько точек на карте, например для одной категории никто не видел?

Geo Category Overview Module подойдёт?

[alexandro]

Geo Category Overview Module подойдёт?

Дык, так он же платный. Даже не знаю как сказать подойдет или нет, не смотря .
Но, вроде то что надо.

[mystique]

Очень приятная штука, хоть и платная. Много чего умеет. Я бы с радостью ее купил, если бы кто-нибудь помог совладать с PayPal. Ни разу еще им не пользовался.

В принципе с их сайта есть ссылочка на пример работы этого модуля.
http://joomla.sigsiu.net/directory.html

[SyncMaster]

На PayPal доступно всё описано по-русски.
На тот момент, когда я регистрировался, требовалась карта не хуже Visa Classic или MasterCard. Сейчас не знаю.
В любом случае, моя Sberbank MasterCard проходит на ура и в PayPal и в MoneyBookers.

[mystique]

Сорри за оффтопик... Но очень не хочется свой пластик светить ради одной операции. Начитался я про PayPal, и как-то не горю желанием им пользоваться.
http://www.paypalwarning.com/

[SyncMaster]

Напомнило мне «Не читайте перед обедом советских газет» © х/ф «Собачье сердце»…

Как можно доверять такому источнику? Достаточно просто посмотреть его меню. Уверен, это кто-то из разорившихся конкурентов.
К тому же, жалуются продавцы за блокировку счета пятилетней давности. Вполне возможно их блокировали «до разбирательства» за какие-то махинации. Никто же не выложил официальные документы. И не выложат.
Да и пароли надо использовать нормальные, а не «123456» или «qwerty».

Я не один год использую PayPal. Так же, его используют мои друзья, работающие за границей, и у которых бизнес работает при помощи PayPal. Никто не говорил о каких-то сложностях. Кроме вывода денег с PayPal'а в Россию. Просто адская комиссия. Ну это в духе «вот на эти два процента я и живу».

До конца этого года я планирую приобрести несколько программных продуктов на 1500–3000$. Ессно через PayPal. И не боюсь за содержимое свой дебетовой карты.

[intcorp]

А как определить координаты объекта на карте со страницы перехода по ссылке waySearchUrl на Google maps?

[SyncMaster]

Вы про Geo Category Overview Module?
Я не знаю кто покупал этот продукт. Но в любом случае, Вам должны оказать официальную поддержку — Вы же его купили

[intcorp]

Вы про Geo Category Overview Module?
Я не знаю кто покупал этот продукт. Но в любом случае, Вам должны оказать официальную поддержку — Вы же его купили

Карта уже отображается (после введения любых координат). Вопрос стоял о стандартных решениях в SOBI2 + Google maps. Почему со страницы waySearchUrl переходит куда следует, а если выводить карту на транице, надо обязательно координаты?

[intcorp]

Например ссылка перехода с waySearchUrl  http://maps.google.com/?ie=windows-1251&hl=ru&q=56%2C+%CD%E8%EA%EE%EB%FC%F1%EA%E0%FF+%F3%EB.%2C+%CD%E8%EA%EE%EB%E0%E5%E2+%D3%EA%F0%E0%E8%ED%E0 как из нее взять координаты?
Понял: жмем по флажку правой кнопкой - что тут находится - в окне поиска появляются координаты

[intcorp]

Использую такой код:

Код:

<script type="text/javascript" language="JavaScript">
/* adjust here the field names if they are not correct */
var apiKey = "{googleApiKey}";
var cityField = 'field_city';
var streetField = 'field_street';
var countryField = 'field_country';
 
function fetchCoordinates() {
  /* here you should not change anything  */
  var gRequest = null;
  var postalcode = document.getElementById(postalCodeField).value;
  var city = document.getElementById(cityField).value;
  var street = document.getElementById(streetField).value;
  var country = document.getElementById(countryField).value;
 
  if(city == '' || street == '' || country == '' ) {
    /* you can change the error message here */
    alert("Заполните адрессные данные");
  }
  else {
    var gRequest = "http://maps.google.com/maps/geo?q=" +street+ "+" +city+ "+" +country+ "&callback=getCoordinates&output=JSON&key="+apiKey;
    var scriptObj = document.createElement("script");
    scriptObj.setAttribute("type", "text/javascript");
    scriptObj.setAttribute("src", gRequest);
    document.getElementsByTagName("head").item(0).appendChild(scriptObj);
  }
}
function getCoordinates(data) {
  switch(data.Status.code) {
    case 610:
      /* you can change the error message here */
      alert("Api key not valid: {googleApiKey}");
      break;
    case 603:
    case 602:
    case 601:
    case 500:
      /* you can change the error message here */
      alert("Не могу получить координаты для данного адресса");
      break;
    case 200:
      document.getElementById(latitudeField).value = data.Placemark[0].Point.coordinates[1];
      document.getElementById(longitudeField).value = data.Placemark[0].Point.coordinates[0];
      break;
  }
}
</script>
<!-- You can change the "value" (The label on the button) here -->
<input type="button" class="button" onclick="fetchCoordinates();" value="Выбрать координаты"/>

И к чему эта кнопка (выбора координат)?
<!-- You can change the "value" (The label on the button) here -->
<input type="button" class="button" onclick="fetchCoordinates();" value="Fetch Coordinates"/>
Она у меня не работает...

[liberator]

Sigsiu Online Business Index 2 Full ChangeLog List
RC 2.9.2.2 (Thu, 30 Jul 2009)
+ Add: (J!1.5 only) Fields for longitude and latitude are added on fresh installation

у меня Joostina 1.2.0, поэтому комментарий это или поправка критичной моей ошибки, не пойму..