@ifrond10 сен 2009 в 14:20

История одного сайта или как мы за месяц сделали приложение на Google Maps

3 мин

744

Я пиарюсь

+35

Комментарии 99

@fog 10 сен 2009 в 14:52

Мой симметричный проект — "Рестораны Одессы"

Карта, естественно, тоже есть, а так же подбор по характеристикам ;)

@sk1p 11 сен 2009 в 04:22

Думал в ту же сторону, но так и не сделал.
Подскажите пожалуйста, а как вы неточности карты обошли? Плохо ведь, когда ресторан находится не в здании, а во дворе, потому что то здание давно снесли, а новое построили чуть в стороне. Или у вас все четко?

@DnV 11 сен 2009 в 11:56

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

@deerua 11 сен 2009 в 12:29

в закладки, любимый город ;)
думаю на карте стоит показывать изначально небольную часть заведений ;)

@fog 11 сен 2009 в 13:20

По какому критерию? :)

@r0f1 11 сен 2009 в 13:27

по рейтингу, например

@mpbikc 11 сен 2009 в 13:50

Для более полного списка
vkontakte.ru/app608030
Вот карта моего города. Здесь пользователи сами создают контент.

@sp3ctr00m 11 сен 2009 в 19:03

На странице с картами, из-за улиц под наклоном, создается визуальное впечатление, что весб дизайн перекособочен :)

НЛО прилетело и опубликовало эту надпись здесь

@fog 13 сен 2009 в 18:41

Спасибо ;)

@vovich 10 сен 2009 в 15:28

приятный диз, а для чего нужны создателям некоммерческий сайт? или он в будущем будет принсить деньги?

@ifrond 10 сен 2009 в 15:34

это просто хобби.

@leonard 11 сен 2009 в 11:20

PR + в будущем скорее всего монетизация. Причем она прозрачна — брать деньги с заведений за баннеры или позицию в поиске.

@ifrond 11 сен 2009 в 11:24

Это чистый PR. Брать деньги с заведений мы не будем.

@wearbo 10 сен 2009 в 15:32

мне понравилось. Единственный момент, когда быстро двигаешь карту, появляется черный фон (Опера 9), которые окаймляет сверху и сбоку как шапка блоки «Новое» и «Популярное»

@ifrond 10 сен 2009 в 15:37

спасибо, посмотрю обязательно. в 10й опере тестировал — все в порядке было

@wearbo 10 сен 2009 в 15:43

@ifrond 10 сен 2009 в 20:35

спасибо еще раз. явно прописал цвет для body.
помогло
simbirsk.net/

@Yeah 11 сен 2009 в 09:15

Небольшой вопрос: а как отнеслись заведения к обзвону? Сразу предоставляли информацию или вы им ограниченный доступ в админку дали, или как-то пришлось уговаривать? Интересует именно механика наполнения данными. Хочу сделать аналогичный проект для своего города.

@ifrond 11 сен 2009 в 09:18

simbirsk-net.livejournal.com/912.html тут по этому поводу менеджер писала.

@Yeah 11 сен 2009 в 09:40

Да уж… Невесело.
Ладно, будем дерзать. Спасибо за информацию.

@3fonov 11 сен 2009 в 10:43

Прочитав про то, как вы выкидывали все из дизайна, сразу представил непонятный белый сайт. А зайдя — приятно удивился. Очень опрятно, чисто и продуманно. Все бы так делали. Так держать!

НЛО прилетело и опубликовало эту надпись здесь

@ifrond 11 сен 2009 в 10:59

Огромное спасибо. Немного ободрения — это то, чего нам сейчас особенно остро не хватает.
Хотя нет. еще нам не хватает комментариев к заведениям ;)

@Tbird 11 сен 2009 в 11:06

Вы молодцы! Сам сейчас делаю приложение на гуглокартах и представляю какой это объем работы.
Иконки отпад!

@VlK 11 сен 2009 в 11:56

Какой объем работы-то? :) с месяц пишу довольно большое приложения для Maps, такое можно было бы склепать за… Два-три дня?

@ifrond 11 сен 2009 в 12:14

на само ядро примерно столько и ушло
но дьявол как обычно в мелочах

@VlK 11 сен 2009 в 12:22

А на чем бэкэнд делался?

@Tbird 11 сен 2009 в 18:23

Для начала, нужно изучить сам API. Ну и как написали выше, дьявол в мелочах. Вы сами говорите что месяц пишете…
Я к тому что мало людей из энтузиазма возьмется писать приложение под Gapi

@VlK 12 сен 2009 в 13:25

Не, ребята по-любому молодцы, сделали очень симпатичную и аккуратную штучку, и дело тут не в том, что сделано что-то нереальное; а в том, насколько ласково это все выглядит в целом.

Насколько понимаю, с картой они почти не колдовали, только отвратные маркеры дефолтные сменили. Здорово было бы еще всплывающее окошко пооригинальней.

@Tbird 12 сен 2009 в 22:24

Окошко поменять — переписать нафиг весь infoWindow. Это уже маньячество. Хотя, если появится свободное время — можно будет заняться.

@VlK 13 сен 2009 в 09:25

Да не, это не так чтобы сложно. Мне надо было делать аналог InfoWindow, но чтоб при разных масштабах окошко выглядело по-разному. Если не ошибаюсь, всего делов было, что переопределить один или два метода, возвращающих html окошка.

Мы всей конторой обсуждали ваш сайтик :) Решили, что, раз уж кастомные маркеры, дизайн непривычный для мэшапов; и карта сама на себя не похожа, то резонно довести все до завершения и сделать еще и модный InfoWindow.

@ifrond 13 сен 2009 в 09:56

мне нравится эта идея — на перспективу. Можете дать пару наводок, как заменить дизайн InfoWindow?
или вы перехватывали событие и отдавали свое окошко?

@VlK 13 сен 2009 в 10:46

Ну не, никаких перехватов. Мы ж с Гугл имеем дело, у них все по-пацански.

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

@ifrond 13 сен 2009 в 11:05

если не сложно, посмотрите, пожалуйста. Хоть сориентируемся в какую сторону копать.

@VlK 14 сен 2009 в 09:01

Все довольно просто. Только код мне мой старый не очень понравился.

В общем случае, InfoWindow — обычный GOverlay. Добавляется на карту обычным образом:

var info = new PlaceInfowin(latlng, 
				   place);
this._map.addOverlay(info);

Здесь latlng — координата внесения окошка, place — информация, на основе которой будет собираться html в пределах окошка.

Сам класс PLaceInfowin выглядит примерно так:

function PlaceInfowin(latlng, place){
    this.prototype = new GOverlay();

    var html = "hello" // сюда кладем html содержимого окошка

    this.initialize = function(map) {
	var div = $('<div />');

	this.map_ = map;
	this.div_ = div;

	div.css({
	    position : 'absolute',
	}).appendTo(map.getPane(G_MAP_FLOAT_PANE)); // здесь вносим наш div на карту

	this.update(html); // рисуем наш infowin либо просто обновляем  содержимое div
    };
    
    this.update = function(html){
	this.html_ = html;
	
	this.div_.empty();

	var content = $('<div/>').addClass('content').css({
	    'position' : 'relative',
	    'overflow' : 'hidden',
	    'top' : 5,
	    'left' : 5,
	    'right' : 5,
	    'bottom' : 5,
	    'height' : 120,
	    'width' : 150,
	}).html(html);
	
	$('<div />').css({
	    'background-color' : 'grey',
	    'height' : 120,
	    'width' : 150,
	    'padding': '2px 2px 2px 2px',
	    'border-width': '2px',
	    'border-style': 'solid',
	    'border-color': 'black'
	}).html(content).appendTo(this.div_);
	
	this.redraw(true); // здесь div будет расположен в нужном месте на карте
    };

    this.redraw = function(force) {
	if (!force) return;

	var point = this.map_.fromLatLngToDivPixel(this.latlng_);

	this.div_.css({
	    left : point.x,
	    top : point.y - this.div_.height() - 30
	});
    };

    //  функция удаление div с карты
    this.remove = function() {
	this.div_.remove();
    };

    // копирование
    this.copy = function() {
	return new PlaceInfowin(this.latlng_, 
				this.place_);
    };
};

Чтобы учитывать масштаб карты, надо в функциях при отрисовке опрашивать this.map_ на текущий zoom level и соответственно отрисовывать html и div, включаемый в карту.

@VlK 14 сен 2009 в 09:02

Надеюсь, не слишком спутанно :)

@ifrond 14 сен 2009 в 09:14

спасибо большое. Попробуем сделать.

@VlK 14 сен 2009 в 09:19

Да не за что :)

Кстати, там JQuery используется, вы, должно быть, заметили.

@ifrond 14 сен 2009 в 10:21

я тоже на jquery делаю. Так что заметил причем «с чувством глубокого удовлетворения»

@VlK 14 сен 2009 в 13:06

Кстати. Маленький баг. Появляется после следующих действий:

1) закрыть карту;
2) открыть карту;
3) скрыть фильтр.

Теперь справа от карты появляется пустое место.

Linux, Firefox 3.0.13. Вроде как и под Виндой что-то похожее появляется.

@ifrond 14 сен 2009 в 13:09

все утро удаляли смежный бак. скрыть фильтр — скрыть карту — открыть карту = скрол вправо. Удалили, но похоже породили другой.
Большое спасибо за Вашу помощь. К сожалению не могу повысить Вам карму дважды.

@degressor 11 сен 2009 в 11:10

Напишите про работу в команде:
— сколько человек?
— как делите работу?
— есть ли лидер, котрый других мотивирует?
— как боролись с ленью?

@ifrond 11 сен 2009 в 11:22

1. 3 человека
2. по специальностям — дизайнер, программист и менеджер
3. менеджер. Бьет, не кормит, накачивает кофе и витаминами
4. см. пункт 3

@Fregy 11 сен 2009 в 11:26

Сколько может стоить клон — под другой город (возможно с нулевым дизаном, только движек)

@ifrond 11 сен 2009 в 11:31

с вашей информацией — порядка 25000 рублей и дней 10. Но возьмемся только в конце сентября, не раньше. К этому времени отрастут модули Пользователи, админка для администраторов кафешек и GeoSiteMam c GeoRSS

@rimmer333 11 сен 2009 в 11:28

Ульяновец. Рад за вас. Как добавлять информацию, не узрел?

@ifrond 11 сен 2009 в 11:34

добавлять информацию о новых кафе можно будет со следующей недели — когда запустим регистрацию. Извините, но пока этот модуль не совсем готов.
Оставить отзыв, проголосовать, подтвердить информацию (ссылочка (все верно)) и сообщить об ошибке (ой, ошибка).
Если вы разрешите, я добавлю вас в пользователи и на следующей неделе пришлю приглашение.

@Aurum 11 сен 2009 в 11:38

Интересный сайт. А мы делаем про Пермь — top2go.ru, но помимо информации о местах еще пишем обзоры и следим за событиями.

@Aurum 11 сен 2009 в 11:49

У вас хорошее, подробное описание мест. Думаю, были бы к месту фотографии интерьеров.

@Lev_in 14 сен 2009 в 11:18

Сайт не открывается =(
Забыли заплатить за хостинг?

@ifrond 14 сен 2009 в 11:20

simbirsk.net/ проверил, работает. Выводилась какая-то ошибка?

@Lev_in 14 сен 2009 в 12:56

Это относилось к пользователю Aurum с его top2go.
В данный момент уже все работает.

@Aurum 14 сен 2009 в 15:17

Ага, были проблемы с хостингом сегодня.

@batal 11 сен 2009 в 11:41

Очень понравилось :) Хотелось бы видеть что то подобное и для своего города (Казань)

@ifrond 11 сен 2009 в 11:44

О, как бы я хотел делать это для Казани! С детальной картой, с номерами домов и рабочим geocoding.
В общем, заказываете.

@zeka 11 сен 2009 в 11:49

А размер окна браузера у вас определяется и в зависимости от этого одна или две колонки?

@ifrond 11 сен 2009 в 11:55

да, при загрузке странице определяем и назначаем соответствующие стили.

@zeka 11 сен 2009 в 12:07

А можно вкратце о реализации?

@ifrond 11 сен 2009 в 12:12

var gW = $.viewportWidth();
if (gW < 1200) {
$('#wrapper').addClass('smalled');
}
это на jquery.
На чистом js не намного длиннее будет.
А в стилях прописываете уточнения вроде
#wrapper. smalled ul.objList li {
width: 450px;
}

@reallyalexpro 11 сен 2009 в 11:53

А почему названия улиц не по-русски? Есть же в Google Maps API возможность указать язык… Специально проверил в своих реализациях, есть в Ульяновске улицы по-русски.

@ifrond 11 сен 2009 в 12:04

я прямо даже и не знаю, что ответить. Конечно, можно — hl=ru в запросе.
Почему никто не заметил, что названия улиц стали на транслите и когда это случилось, я не знаю. Спасибо огромное.

@DnV 11 сен 2009 в 12:11

Исправления в реальном времени )
Транслитом почему-то гламурнее что ли смотрелось.

@reallyalexpro 11 сен 2009 в 13:05

Починили. Молодцы! :)

НЛО прилетело и опубликовало эту надпись здесь

@ifrond 11 сен 2009 в 12:02

только 4 заведения имеют wi-fi
чего уж там искать среди них :)

НЛО прилетело и опубликовало эту надпись здесь

@CriggerMarg 11 сен 2009 в 12:01

интересные развлечения в ресторане Сахара…

Развлечения и программа бой титанов (в основном в пт., сб.)

@ponomar 11 сен 2009 в 12:05

Спасибо за ресурс! Добавил в закладки, буду пользоваться.

@ifrond 11 сен 2009 в 12:08

всегда пожалуйста. На подходе банкоматы, аптеки и автоточки. Будем рады видеть вас и там.

@deerua 11 сен 2009 в 12:15

ФФ 3.5.3 при клике «на карте» ДЖс еррор, и переходит на детально инфо места.

@ifrond 11 сен 2009 в 12:17

проверил, все работает. возможно недогрузились скрипты? Попробуйте F5+F5+F5

@deerua 11 сен 2009 в 12:20

ну тогда уж контрол+ф5
скрипт срабатывает, открывается попап, но уже потом

Ошибка: console is not defined
Источник: simbirsk.net/js/dsn.js
Строка: 228

кароче говоря фаербаг не увсех есть, или включён ;))

@deerua 11 сен 2009 в 12:34

(typeof console == «object») console.log(«lalala»);

@ifrond 11 сен 2009 в 15:36

извините, забыл закомментировать отладочный код

@deerua 11 сен 2009 в 12:19

между тегами, в описании уж слишком большое расстояние, уберете лишние пробелы (минифай так сказать), увеличите скорость загрузки ;)

очень грамотный подход к гуглмасп.Апи ;)

@deerua 11 сен 2009 в 12:37

По мелочам поправить и конфетка!

@VlK 11 сен 2009 в 12:17

чистый и аккуратный дизайн, молодцы. Глаз отдыхает.

@deerua 11 сен 2009 в 12:21

на редкость приятно и качественно! %)

@WArt 11 сен 2009 в 13:02

Обалдеть, ребята. Серьезно безкорыстной радостью порадовался). Молодцы. За 7 лет жизни в Ульске по памяти это, наверное, первый проект аля «европейского» уровня. На первый взгляд во всяком).

@jcd 11 сен 2009 в 13:12

Очень хороший сайт получился, поздравляю. Москвичам конечно не привыкать к такому развитию информационных услуг, а вот в регионах дремучий лес совершенно.

@Eredel 11 сен 2009 в 13:28

Ульяновец. Отличный проект!!! Думаю было бы хорошо центрировать карту на районе при выборе оного, а то каждый раз передвигать карту — быстро надоест :)

@ifrond 11 сен 2009 в 15:36

точно. в todo добавил. спасибо

@shard 11 сен 2009 в 13:32

Если отфильтровать по «грузинская», то получим два Алазани по тому-же адресу.
Отдельно — ресторан, отдельно — кафе?

Может, все-таки, один объект показывать?

@egoholic 11 сен 2009 в 13:47

самое интересное забыли написать — о монетизации.

@Shiz 11 сен 2009 в 14:08

1. нельзя управлять масштабом карты колесиком
2. при уменьшении ширины экрана появляется скрол
3. если загрузить страницу со скрытой картой, а потом ее развернуть, то карта не будет тянутся при ресайзе окна
4. футер не прижимается к низу страницы при ресайзе

@ifrond 11 сен 2009 в 15:39

1. на всех не угодишь. До этого жаловались, что при загрузке когда пытаешься прокрутить карту до контента, вместо этого изменяется масштаб. Поставлю выбор действия в профайл пользователя, чтобы каждый сам себе мог выбрать.
2. знаю. на ресайз пока не повесили действие. в todo одназначно
3. не знал. поправим.
4. на ресайз не вешали действий. тоже в todo

Большое спасибо за замечания. 4 из 4 в работу :)

@mitrichlab 12 сен 2009 в 01:02

При работе колесом учитывать находимся над картой или над текстовым контентом.
Мне поначалу показалось, что масштабирование не работает вообще.
Скорее всего это привычка к гугломапам и близость к IT сфере вообще.

Реальный пользователь, возможно, будет работать с сайтом совсем не так.

@kozyabozya 11 сен 2009 в 14:26

классный пример того, что можно сделать за месяц

молодцы!

@Kokoff 11 сен 2009 в 14:57

СУПЕР! Главное с умом и ничего лишнего. Аплодисменты =)

@soloweb 11 сен 2009 в 15:56

Довольно не плохо сделанно :-)
Главное теперь не закидывать проект и продолжать его развивать, ну конечно в лудшую сторону :-)

@edneo 11 сен 2009 в 16:00

А я уже отчаялся искать земляков на Хабре. Ан нет. :-)
Молодцы! :-)

@orange12 11 сен 2009 в 19:30

думаю ресурс будет востребован, так как такого, чтобы наглядно и удобно, для нашего города ещё никто не делал, главное теперь развивать его

@ksider 12 сен 2009 в 20:15

ктонибуть «бесплатные туалеты» уже сделал?

@dasty 14 сен 2009 в 07:43

Какое «говоряще» название

@nilya 14 сен 2009 в 11:03

Хороший проект. А отзывы посетителей о заведениях будете делать?

И еще, в окне «Хитрого поиска» не сразу понятно что делать после выбора значений фильтров или простановки галочек. Рука тянется к нижнему правому углу окошка. Кстати, около поля «Название» есть большая кнопка, а нижняя часть окна отделена, как будто это отдельная форма и у нее должна быть своя кнопка. Может как-то части объединить визуально?

И похоже баг: сделал «Хитрый поиск», хочу еще раз поискать. Нажимаю «фильтры ->» в углу, в панели нажимаю «Хитрый поиск», открывается окошко с надписью «секундочку...» и ничего не загружается. Ff 3.5.3.

@ifrond 14 сен 2009 в 11:26

1. от пользователей пока только в виде комментариев. Боюсь полноценные отзывы/обзоры все равно придется самим писать
2. это разумно. нужно поставить еще одну здоровую яркую кнопку снизу, благо место там есть
3. в подавляющем большинстве пользователи ищут кафешку по названию. Поэтому, чтобы они не мучались и не искали поле с названием мы его вынесли и увеличили. но после вашего комментария согласен — выглядит как 2 несвязанные формы. Поправим сегодня же
4. возможно подвис хостинг. Мы не ожидали такого притока посетителей (2500 уников с хабра). Добавлю рядом с секундочку ссылку «отменить» на такой случай.
2, 3 и 4 в todo.
Большое спасибо

@visor86 14 сен 2009 в 13:08

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

@Kasheftin 15 сен 2009 в 20:43

Немножко поковырял Ваш сайт, классно написано. Я про js код, читаешь как книжку.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий