Фильтр по:
  

  • Страница 1 из 4
  • 1
  • 2
  • 3
  • 4
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Карта Google в uCoz (Реализация внедрения GoogleMap на uCoz сайт)
Карта Google в uCoz
Дата: Пятница, 10.09.2010, 21:38 |
Рядовой
Группа: Пользователи
Награды: 0
Репутация: 0
Статус: Offline


Предлагаю рассмотреть возможность использования карт Google для сайтов Ucoz.

Суть задачи буду излагать на примере потребности нашего сайта (Алтай Фото), для модуля Фотоальбом.
Наш сайт позиционируется не просто как фото-сайт, но и как туристический. Многим пользователям важно, где сделана фотография. Лично я не вижу лучше способа, чем карты Google, рассказать об этом.
Думаю, что решение с картами, пригодится для многих сайтов, сервис отличный!

1)
- в форме добавления (и редактирования) фотографии на сайт, размещается дополнительная текстовая-кнопка "Отметить на карте"
- при нажатии на данную кнопку появляется окно (желательно ajax) с картой Google и стандартными элементами управления (масштаб, спутник и т.п.)
- пользователь, передвигая карту, находит нужное место, отмечает, и нажимает OK
- данные с координатами (и текущий масштаб карты) заносятся в дополнительное поле модуля Фотоальбом (поле в форме добавления скрыто от пользователя)
- далее, пользователь сохраняет фото

2)
- при открытии страницы с фотографией в определённом месте выводится карта с меткой (маркером) на место (масштаб вывода стандартный на всех фото)
Пример: http://fotojazz.35photo.ru/photo_88741/
- если автор не отметил при загрузке фото, места на карте, то выводится "заглушка"
- под картой располагается текстовая-кнопка "Смотреть карту", при нажатии на которую открывается окно (желательно ajax) с большой картой Google (в масштабе, что был при сохранении) и элементами управления
- дополнительно, в информационном блоке на странице с фотографией (где указан автор, дата и т.п.), можно отображать дополнительный пункт - "Координаты" с числовым значением координат отмеченных на карте. Если автор не отметил фото на карте, то пункт не отображается.

В общем-то, это и всё... Как мог, изложил со свое дилетантской позиции...
Готов обсуждать и всячески содействовать реализации и дальнейшей популяризации этого решения!

Добавлено (10.09.2010, 21:38)
---------------------------------------------

API Google Earth - http://code.google.com/intl/ru/apis/earth/

Тем, кто захочет воспользоваться картами google, предварительно придётся регистрироваться и получать ключ API Карт Google.

Сообщение отредактировал jazator - Пятница, 10.09.2010, 21:39
 
Дата: Суббота, 11.09.2010, 09:15 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


jazator,
Quote (jazator)
- если автор не отметил при загрузке фото, места на карте, то выводится "заглушка"

- А зачем? - можно ничего не выводить ... ヅ
В принципе, идея не плохая,ヅ, даже больше хорошая, и, по большому счёту, вполне выполнимая.
Quote (jazator)
- в форме добавления (и редактирования) фотографии на сайт, размещается дополнительная текстовая-кнопка "Отметить на карте"
- при нажатии на данную кнопку появляется окно (желательно ajax) с картой Google и стандартными элементами управления (масштаб, спутник и т.п.)

- Здесь - все просо. Как и написано - кнопка и JScript ... И ката, желательна с поиском - видел такую - реально - пользователь вводит ближайший пункт - и он появляется. При тыке в нужное место - заполняется скрытое поле, координатами этого места, - реально.

Quote (jazator)
- при открытии страницы с фотографией в определённом месте выводится карта с меткой (маркером) на место (масштаб вывода стандартный на всех фото)

Тож ничего сложного. Данные из поля получаются, разбиваются скриптом и вставляются в управляющий картой скрипт ...

Quote (jazator)
- под картой располагается текстовая-кнопка "Смотреть карту", при нажатии на которую открывается окно (желательно ajax) с большой картой Google (в масштабе, что был при сохранении) и элементами управления

- Может его сразу - на новую страницу сайта - с координатами места? - удобнее, чем ждать ещё и окно ... ヅ Отправлять по ссылке типа: _http://likbezz.ucoz.ru/map/?corLat=24.8864364907877&corLng=110.6982421875 - страница получает координаты и выводит большую карту ...
Хотя можно и аякс ... Стандартный ...

Quote (jazator)
Готов обсуждать и всячески содействовать реализации и дальнейшей популяризации этого решения!

А чего обсуждать? - единственное, если уже кто нить занимался этим, и есть готовые наработки ... А так - брать и делать. Даже если с нуля - не вижу особых сложностей. Геморроя - много, согласен ...

Quote (jazator)
Тем, кто захочет воспользоваться картами google, предварительно придётся регистрироваться и получать ключ API Карт Google.

- Вот этого, с первого, беглого, осмотра не заметил. Хотя в гугле зарегистрирован. ツ И это первый “гимор” .... ヅ


Flesh


 
Дата: Суббота, 11.09.2010, 18:45 |
Рядовой
Группа: Пользователи
Награды: 0
Репутация: 0
Статус: Offline


Quote (likbezz)
по большому счёту, вполне выполнимая.

Почитал ваши решения на сайте, думаю, что это так !!!

Quote (likbezz)
выводится "заглушка"

Действительно, это лишнее...

Я исходил из того, что "заглушкой" привлечёт внимание пользователя, что он не отметил фото на карте.
С другой стороны, куда правильнее будет, если каждый администратор желающий использовать карты будет использовать свой механизм оповещения о не отмеченных на карте фото.
Как я понимаю, достаточно будет проверить условием, содержимое дополнительного поля, а там уж, кому как нужно: просто напоминание, или всплывающее окно, или мигающий текст и т.п.

Quote (likbezz)
(масштаб вывода стандартный на всех фото)

Тут может показаться, что перебор написал...
Сейчас объясню ход мысли.
Сайты разные, кому-то нужен весь мир, кому-то только один регион, а кому-то только город.
Если рядом с фото будут очень крупный масштаб, такой в котором отмечал пользователь при сохранении фото, то может быть непонятно где это, придётся зрителям открывать карту и скролить масштаб, что бы понять, это неудобно... А так, администратор сайта сразу устанавливает стандартный масштаб исходя из потребностей сайта и большинству будет понятно не открывая карту где это примерно.

Quote (likbezz)
- Может его сразу - на новую страницу сайта - с координатами места?

Согласен, можно и так !!! Думаю, что для большинства это не принципиально.

Quote (likbezz)
Хотя можно и аякс ... Стандартный ...

Да, я так думал. Открыл человек, посмотрел и закрыл. Наверное, в большинстве случаев именно так и будет происходить.

А вот вариант с вашим примером ссылки

Quote (likbezz)
_http://likbezz.ucoz.ru/map/?corLat=24.8864364907877&corLng=110.6982421875

вот какую мысль навеял...!
- при просмотре карты появляется окно, человек может поставить в нём свой маркер, и нажать кнопку не "закрыть", а нажать "сохранить" - тогда, координата уходит в комментарий в виде ББ кода в виде ссылки на место!
Мне кажется удобно ;-)
Применения могут быть разные, допустим, автор неправильно отметил место и другой человек уточняет ему правильное.

Quote (likbezz)
И это первый “гимор” .... ヅ

Это не много время будет отнимать, большинству будет под силу...

Прикрепления: 4751678.jpg (197.4 Kb) · 3601773.jpg (195.8 Kb) · 5266300.jpg (157.5 Kb)

Сообщение отредактировал jazator - Суббота, 11.09.2010, 19:31
 
Дата: Суббота, 11.09.2010, 22:48 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


jazator,
Quote (jazator)
Это не много время будет отнимать, большинству будет под силу...

... То, что под силу, это-то понятно. Я имел в виду другое. То что мне, при осмотре сервиса, не бросилась в глаза ссылка типа: “Регистрироваться, получить API-ключ и подобное ....” .... Всё таки не оч удобно проработали этот вопрос создатели сервиса.
По идее, я должен зайти и увидеть что-то подобное, а тут, получается, мне ещё нужно искать, где тут можно получить заветный ключик.
Многих это оттолкнёт, причём сразу, а учитывая англоязычность мануала .... ヅ

Quote (jazator)
Тут может показаться, что перебор написал...
Сейчас объясню ход мысли.
Сайты разные, кому-то нужен весь мир, кому-то только один регион, а кому-то только город.

- может выбор масштаба оставить на стороне пользователя - масштаб при сохранении. Типа отметил, выбрал масштаб, нажал кнопку [применить] ... координаты ушли в скрипт.
Я думаю, у пользователей, да ещё и с возможностью добавлять ... должно быть понятие о том, что он делает .. по идее...
Кроме того, на страницу добавления, естественно, нужно будет вывести справку, для работы с функцией, как в ПУ [?] - при клике - новое окно - с кратким описанием что и как ...

Quote (jazator)
Я исходил из того, что "заглушкой" привлечёт внимание пользователя, что он не отметил фото на карте.

А само отсутствие карты не привлечёт? .... biggrin
...
Короче, попробую найти где получить этот ключ, если есть прямая ссылка - скиньте, и гляну, как всё это реализовать по-проще ... ヅ


Flesh


 
Дата: Воскресенье, 12.09.2010, 11:48 |
Рядовой
Группа: Пользователи
Награды: 0
Репутация: 0
Статус: Offline


Quote (likbezz)
Короче, попробую найти где получить этот ключ, если есть прямая ссылка - скиньте, и гляну, как всё это реализовать по-проще ... ヅ

Для начала нужно иметь свой аккаунт в google, зарегистрироваться можно хоть через почту, хоть через любой другой сервис google.
Далее логинимся и заходим на эту страничку - http://code.google.com/intl/ru/apis/maps/signup.html
Здесь достаточно только указать свой сайт.
Для нашего Алтай Фото получился вот такой ключик - ABQIAAAAgX4QdDe6lCXIw1VrYyE36hTCBWW0qO2NEL76eGH4hS7sPGFnXhTcJkj3OX8na02J_f4WVtIH6Z1owA

И вот тут хороший FAQ на русском - http://code.google.com/intl/ru/apis/maps/faq.html#keysystem

 
Дата: Воскресенье, 12.09.2010, 12:24 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


jazator,
... Получил ... Для локалки ... не думал, что прокатит ...

... Ну, чё - все просто ...
Осталось продумать интерфейс ... и писать скрипт ... ヅ
...
Всего три цифры ..
Quote
new GLatLng(37.4419, -122.1450), 15)

37.4419, -122.1450 - координаты
15 - масштаб, в формате 1:x*...
...

Flesh

Прикрепления: 8298584.png (31.2 Kb)

 
Дата: Воскресенье, 12.09.2010, 15:20 |
Рядовой
Группа: Пользователи
Награды: 0
Репутация: 0
Статус: Offline


А вот, что получилось у меня,
пример на одном фото
http://altai-photo.ru/photo/tuchnyj_oktjabr/13-0-4219

Добавлено (12.09.2010, 13:06)
---------------------------------------------

Code
    <script src="http://maps.google.com?file=api&v=2.x&key=ABQIAAAAgX4QdDe6lCXIw1VrYyE36hTCBWW0qO2NEL76eGH4hS7sPGFnXhTcJkj3OX8na02J_f4WVtIH6Z1owA" type="text/javascript"></script>
       <script type="text/javascript">
       function initialize() {
         var map = new GMap2(document.getElementById("map_canvas"));
         map.setCenter(new GLatLng$OTHER1$;

         map.setMapType(G_HYBRID_MAP);
         map.setUIToDefault();

         map.enableRotation();
       }
       </script>   

$OTHER1$ - первое дополнительное поле, в него я положил координаты (49.826467,86.323357), 13)

Проверяем, содержит ли поле значение, если содержит, то вывод карты

Code
<?if($OTHER1$)?>
<div id="map_canvas" style="width: 700px; height: 500px"></div>       
<?endif?>   

Да, боди странички должно иметь такой вид

Code
<body onload="initialize()" onunload="GUnload()">

Основывался я на этом примере
http://code.google.com/intl/ru/apis/maps/documentation/javascript/v2/examples/aerial-simple.html

---------------------------------------------
Ещё момент упустил - маркер.
Добавляем его так:
var marker = new GMarker(new GLatLng(49.825580752509346,86.35510540021642));
map.addOverlay(marker);

координаты, по хорошему из нужно брать из $OTHER1$, но там хранится и масштаб... (49.826467,86.323357), 13) надо как-то резать...

И ещё тонкость заметил, что карта центрируется относительно координат, а вот маркер уходит в верхний-левый угол (видно на примере http://altai-photo.ru/photo/tuchnyj_oktjabr/13-0-4219)... что не есть гут... попробую сейчас разобраться...

---------------------------------------------

Quote (likbezz)
И ката, желательна с поиском - видел такую - реально - пользователь вводит ближайший пункт - и он появляется.

Получается всё просто: map.enableGoogleBar();

---------------------------------------------
Координаты получается вернуть таким образом:
GEvent.addListener(map,"click", function(overlay,latlng) {
if (overlay) {
// ignore if we click on the info window
return;
}
var tileCoordinate = new GPoint();
var tilePoint = new GPoint();
var currentProjection = G_NORMAL_MAP.getProjection();

var myHtml = "(" + latlng.lat() + "," + latlng.lng() +
"), " + map.getZoom() +
")";
map.openInfoWindow(latlng, myHtml);
});

Сообщение отредактировал jazator - Воскресенье, 12.09.2010, 16:58
 
Дата: Воскресенье, 12.09.2010, 17:15 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (jazator)
Да, боди странички должно иметь такой вид

- не обязательно ...
Смотри пример ... Можно и по другому .. (пара способов)
Quote (jazator)
Координаты получается вернуть таким образом:

- сообразил уже ...
... Блин, как метку по центру выставить ... не ужели только стилями .....? ... Заколебался уже ... Изменение координат - не влияет на метку ...

Quote (jazator)
координаты, по хорошему из нужно брать из $OTHER1$, но там хранится и масштаб... (49.826467,86.323357), 13) надо как-то резать...

-Это пустяки ... скриптом соединять через «|» -- «49.826467|86.323357|13» -- Тем же макаром и обратно ... Главное, что бы символов в поле хватило ... И на координаты, и на метку ... ヅ И на прочие атрибуты ... ヅ
А заносить, если в ручную - то три поля - “левых”, а если автоматом - выводить карту пусть сам тыкает. (latlng.lat();)


Flesh

Прикрепления: GoogleMaps_v1.html (1.8 Kb)

 
Дата: Воскресенье, 12.09.2010, 17:41 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Слушай, а если делать запрос прямо ну гугл? .... через getJSON ... не проще будет?
Вот ссылка на твою координату ....
[url=http://www.google.com/maps?f=&ie=UTF8&ll=49.826467,86.323357&spn=0.785795,2.117615&z=13]http://www.google.com/maps?f=&ie=UTF8&ll=49.826467,86.323357&spn=0.785795,2.117615&z=13[/url]

Прикрепления: _l.txt (0.2 Kb)

 
Дата: Воскресенье, 12.09.2010, 17:48 |
Рядовой
Группа: Пользователи
Награды: 0
Репутация: 0
Статус: Offline


Про ключик, вот информацию нашёл...
Можно без ключа, если с 3-й версией работать smile
http://grigorieff.ru/?p=852

Quote (likbezz)
Изменение координат - не влияет на метку ...

Сейчас попробовал, так
Code
      var marker = new GMarker(new GLatLng(49.825580752509346,86.35510540021642));
       map.addOverlay(marker);  

всё ОК, метка в центре !!!

Quote (likbezz)
49.826467|86.323357|13

А мне кажется, что лучше так (49.826467,86.323357), 13 ...меньше время вычислений уйдёт на преобразования и обрезания

Quote (likbezz)
latlng.lat();

не понял о чем это cry
------------------------------------------------

Сейчас попробую 3-ю версию использовать, отпишусь !!!

Добавлено (12.09.2010, 17:45)
---------------------------------------------

Quote (likbezz)
Слушай, а если делать запрос прямо ну гугл? .... через getJSON ... не проще будет?

Конечно проще, но ведь функционально слабее...
У меня таким образом сделано в другом разделе
вот пример - http://altai-photo.ru/stuff/khrebty_perevaly_ledniki/1/1/33-1-0-35
карта выводится при нажатии на эту кнопку

Добавлено (12.09.2010, 17:48)
---------------------------------------------
Мне вот сейчас реально мозгов не хватает,
при загрузке фото показываем карту, нажали, вернули координаты..., а вот как, что бы они попали в дополнительное поле....??? cry



 
Дата: Воскресенье, 12.09.2010, 17:50 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (jazator)
всё ОК, метка в центре !!!

- цифры откуда?
Их нужно на автомате вычислять ...

Quote (jazator)
А мне кажется, что лучше так (49.826467,86.323357), 13 ...меньше время вычислений уйдёт на преобразования и обрезания

- Зато больше на обрезание и фильтрацию скобок ...

Quote (jazator)
не понял о чем это cry

- пользователь нашёл место, тыкнул в него мышкой, координаты записались в переменную и отправились, при сохранении, на сервер .... Координаты метки ... ヅ Пример смотри и потыкай в него ...


 
Дата: Воскресенье, 12.09.2010, 17:59 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (jazator)
а вот как, что бы они попали в дополнительное поле....???

Так они уже в переменной, когда тыкнул ...
Quote
var myHtml = "(" + latlng.lat() + "," + latlng.lng() +
")

latlng.lat() - первая координата
latlng.lng() - вторая ...
Прописать ещё одну ...
var mylat =latlng.lat();
var mylng =latlng.lng();

Широта:=latlng.lat();
Долгота:=latlng.lng();

Здесь-то просто ...
А при нажатии сохранить ... или прямо сразу - в значение скрытого поля ...

Quote (jazator)
var marker = new GMarker(new GLatLng(49.825580752509346,86.35510540021642));

Quote (jazator)
А мне кажется, что лучше так (49.826467,86.323357), 13 ...меньше время вычислений уйдёт на преобразования и обрезания

- один хрен, нужны отдельные числа. Как бить - это уже несущественно ...


 
Дата: Воскресенье, 12.09.2010, 22:42 |
Рядовой
Группа: Пользователи
Награды: 0
Репутация: 0
Статус: Offline


Quote (likbezz)
Quote (jazator)
всё ОК, метка в центре !!!

- цифры откуда?
Их нужно на автомате вычислять ...


Готово!
Code

       var marker = new GMarker(new GLatLng<?substr($OTHER1$,0,strpos($OTHER1$,'/)'))?>);
       map.addOverlay(marker);   

Возвращает из (широта,долгота), масштаб --->>> (широта,долгота)

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

Code
<?substr($OTHER1$,strpos($OTHER1$,'/)')+2)?>

вернёт только цифру масштаба

Добавлено (12.09.2010, 21:16)
---------------------------------------------
Сейчас взялся за форму добавления фотографии и первый подводный камень... - через форму можно добавлять до 10 фотографий... выходит, нужно 10 раз отмечать на карте и записывать данные в 10 разных полей базы...
Чую в этом может быть сложность...

Но для себя нашёл в этом ПЛЮС biggrin
А именно, давно хотел убрать эту возможность, да и немного модернизировать стандартную форму загрузки фотографий !!! Т.ч. сейчас берусь её переписывать под себя.

Добавлено (12.09.2010, 22:11)
---------------------------------------------

Quote (jazator)
Т.ч. сейчас берусь её переписывать под себя.

Переписал, но счастья нет....

Дело в следующем, при вводе данных всё хорошо, но стоит потом зайти в редактировании фотографии и все поля пустые...

Добавлено (12.09.2010, 22:42)
---------------------------------------------
cry

Что-то мне совсем малого не хватает для продолжения экспериментов...
Вопрос в следующем:
- вот есть карта на странице Добавления фотографии
- есть поле для хранения данных

Code
<input type="text" class="manFlOth1" size="35" style="width:100%;" name="other1'+i+'" maxlength="200"/>

Как теперь передать координаты с карты в это поле...........?
Что-то у меня не выходит... HELP !!!


 
Дата: Понедельник, 13.09.2010, 00:43 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (jazator)
Сейчас взялся за форму добавления фотографии и первый подводный камень... - через форму можно добавлять до 10 фотографий... выходит, нужно 10 раз отмечать на карте и записывать данные в 10 разных полей базы...

- Так это для модуля фотоальбом? ...
Чет я не подумал о множественном выборе .... А если координаты различаются координально - то есть первая в северном полушарии а вторая в Австралии? ... Нет ... думаю это будет не совсем правильно .... Один материал - одна координата.
... Или к каждой фотке - свою карту .... Или как нибудь помечать флажки - типа это - от этой фотки -а это - вот от этой ...ヅ

Quote (jazator)
Дело в следующем, при вводе данных всё хорошо, но стоит потом зайти в редактировании фотографии и все поля пустые...

...


 
Дата: Понедельник, 13.09.2010, 06:18 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (jazator)
Как теперь передать координаты с карты в это поле...........?
Что-то у меня не выходит... HELP !!!

Ну, например вот так:
Пример .... смотри исходник ... Проще ...

Поле специально не скрыл - под картой, чтобы видно было, что заносится в значение ... ヅ

Quote (jazator)
Дело в следующем, при вводе данных всё хорошо, но стоит потом зайти в редактировании фотографии и все поля пустые...

Code
<?if($PAGE_ID$='add')?>Один скрипт<?endif?>
<?if($PAGE_ID$='edit')?>Другой скрипт<?endif?>

При редактировании - получаем значение из доп.поля, режем, и распихиваем куда нужно ...
...
А вот как получить текущие координаты самой карты.... Подозреваю, что их придётся тоже фиксировать .... Не “подозреваю”, а так и есть ... ヅ


Flesh

Прикрепления: GoogleMaps_v2_l.html (2.3 Kb)

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Карта Google в uCoz (Реализация внедрения GoogleMap на uCoz сайт)
  • Страница 1 из 4
  • 1
  • 2
  • 3
  • 4
  • »
Поиск:


Мобильная версия