[Ликбез]

Форма входа
Логин:
Пароль:

Меню сайта

Тема закрыта

Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать... » Карта Google в uCoz

Карта Google в uCoz
[1] jazator [10.09.2010, 21:38]
Предлагаю рассмотреть возможность использования карт 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
[2] likbezz [11.09.2010, 09:15]
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
[3] jazator [11.09.2010, 18:45]
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
[4] likbezz [11.09.2010, 22:48]
jazator,
Quote (jazator)
Это не много время будет отнимать, большинству будет под силу...

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

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

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

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

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


Flesh
[5] jazator [12.09.2010, 11:48]
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

[6] likbezz [12.09.2010, 12:24]
jazator,
... Получил ... Для локалки ... не думал, что прокатит ...

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

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

Flesh

Прикрепления: 8298584.png (31.2 Kb)
[7] jazator [12.09.2010, 15:20]
А вот, что получилось у меня,
пример на одном фото
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
[8] likbezz [12.09.2010, 17:15]
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)
[9] likbezz [12.09.2010, 17:41]
Слушай, а если делать запрос прямо ну гугл? .... через 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)
[10] jazator [12.09.2010, 17:48]
Про ключик, вот информацию нашёл...
Можно без ключа, если с 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

[11] likbezz [12.09.2010, 17:50]
Quote (jazator)
всё ОК, метка в центре !!!

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

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

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

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

- пользователь нашёл место, тыкнул в него мышкой, координаты записались в переменную и отправились, при сохранении, на сервер .... Координаты метки ... ヅ Пример смотри и потыкай в него ...
[12] likbezz [12.09.2010, 17:59]
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 ...меньше время вычислений уйдёт на преобразования и обрезания

- один хрен, нужны отдельные числа. Как бить - это уже несущественно ...
[13] jazator [12.09.2010, 22:42]
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 !!!
[14] likbezz [13.09.2010, 00:43]
Quote (jazator)
Сейчас взялся за форму добавления фотографии и первый подводный камень... - через форму можно добавлять до 10 фотографий... выходит, нужно 10 раз отмечать на карте и записывать данные в 10 разных полей базы...

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

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

...
[15] likbezz [13.09.2010, 06:18]
Quote (jazator)
Как теперь передать координаты с карты в это поле...........?
Что-то у меня не выходит... HELP !!!

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

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

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

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

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


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


Полная версия сайта