Пользователь
0,0
рейтинг
14 июня 2010 в 19:48

Разное → MakeMap — покажи себя на карте

imageЗдравствуй %username%
Хочу представить твоему вниманию новый проект посвященный картам проезда и визуальному созданию кода для карт Google.

Некоторое время назад мой друг поинтересовался, а как встроить в свой сайт карту Google? Показав ему стандартный JavaScript код для встраивания карты в свой сайт я услышал, что это достаточно сложно для неспецалиста. И судя по всему для человека который далек от веб-разработки, это так и есть. В итоге родилась идея которую я и представляю на твой, %username%, суд. Сервис реализовал с помощью Google Maps API + Mootools + Yourls (Спасибо getnaked)

www.makemap.ru

Основные возможности сервиса:
  1. Встраивание карты в свой сайт без получения кода Google Maps API через «iframe»
  2. Короткая ссылка на точку указанную вами. Ставите маркер, получаете ссылку, даете другу — он видит то, что вы отметили на карте.
  3. Получение чистого JavaScript кода Google Maps API для встраивания в свой сайт.

Основные моменты сервиса:
  1. Указание маркера с дизайном.
  2. Возможность выбора глубины просмотра. Т.е. какую глубину вы видите на экране ту увидите и у себя на сайте.
  3. Возможность выбора элементов управления увеличением.
  4. Возможность выбора типа карты. Опять же, какой тип карты (схема, спутник, гибрид) выберете текущим, такой и будет у тебя показываться
  5. Ширина карты (действительно только для встраивания)
  6. Высота карты (действительно только для встраивания)

Преимущества сервиса:
  1. Нет регистрации. (Возможно она и будет в дальнейшем, но пока не планируется).
  2. Все действия происходят на одной странице.
  3. Для встраивания карты в свой сайт не требуется получения Google API Key
    Используется третья версия API. У неё нет необходимости использовать ключ.


PS: Пример короткой ссылки: http://y.makemap.ru/13
PPS: Хабраэффект ожидаем. Заранее приношу извинения за возможную недоступность сервиса.

UPD: Сервис переведен на третью версию Google Maps API.
Савченков Павел @3fir
карма
5,5
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разное

Комментарии (94)

  • +4
    Симпатичный сервис.
    Для его заявленной цели не хватает, собственно, двух кнопок: «поставить метку» и «проложить маршрут». :)
    • 0
      Для добавления маркера достаточно клацнуть по карте.
      Прокладывание маршрута в планах, думаем как это реализовать малой кровью. Основная идея — НЕТ регистрации. Поэтому данный пункт думаем.
      • 0
        Ставьте каждому зашедшему инкрементный ID в куку. Что регистрации нет — респект!
      • 0
        Добавьте в слои OpenStreetMap, пожалуйста.
        И ещё, хотелось бы получать карту как вариант и картинкой, типа как на latlon.org/sketch :)
  • НЛО прилетело и опубликовало эту надпись здесь
    • –2
      Согласен, звучит двояко.
      Я могу задать встречный вопрос? Схема проезда в вашем понимании блок в котором указана схема проезда или блок в котором отмечена точка к которой нужно ехать?

      В моем понимании — точка. Почему? Ну может быть потому, что ехать я могу с любой стороны.
      • НЛО прилетело и опубликовало эту надпись здесь
        • –2
          Хорошо. Я согласен с Вами. Схема это указание направления.
          Т.е. как проехать от метро N до нашего офиса.
          С другой стороны, вы всегда ездите на метро? Реально ли указать направление движения универсально? Так, чтобы отовсюду и именно к нам?
          Думаю нет.

          Второй момент. Чистое SEO.
          • НЛО прилетело и опубликовало эту надпись здесь
            • –2
              Схему дает Google. Разве нет?
              Я же не говорю, что мы космическое что-то придумали, мы всего лишь облегчили некоторым пользователям задачу.
              Собственно в этом и была идея.
              • НЛО прилетело и опубликовало эту надпись здесь
                • –4
                  Технически да.
                  С другой стороны есть момент, что на карте направление движения по улице задано, что уже чуть-чуть является схемой.
                  • +6
                    вы понимаете, что спорите с потенциальным пользователем вашего сервиса? :)
  • +2
    Все же нарастите сервис до прокладывания маршрутов вручную — хоть линии постепенно рисуя — уже хорошо будет.

    т.е. можно будет проезд к конкретному место делать, веломаршруты рисоват и подбное, а просто точки так это вроде и в гугле можно делать
    • –1
      Да, в будущем это будет реализовано. Но вот каким образом — ответить пока не могу.
      Как я ответил в самом начале — я не хочу регистрации, а сделать без регистрации последовательность координат практически невозможно.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Теоретически да, но адрес может вырасти до неимоверной длины. Честно, я не программист, я не знаю какая максимальная длина адреса.
          • +3
            1. новая сессия (новый пользователь или нажатие на «начать снова»)
            2. пользователем рисуется направление движения
            3. «получить код»/«получить ссылку» — делается небольшая БД, в которой короткий УРЛ будет содержать id записи в БД, в которой будут координаты линии и точек
            • 0
              Спасибо. Все верно. Я забыл упомянуть о том, что использование БД мы хотим свести к минимуму.
              Сокращалка была использована по необходимости. Хотя звучит это уже как оправдание, сам понимаю.

              В любом случае, через время использовать базы придется. От этого никуда не деться. Уверен даже очень скоро :)
              • НЛО прилетело и опубликовало эту надпись здесь
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Виноват, исправлюсь.
  • –7
    Как-то маловато функций предоставляет Ваш сервис. Воткнуть маркер на карту — хорошо. Это всё? А если у меня имеются координаты точки, но я понятия не имею, где она географически расположена, но мне нужно добавить метку на карту? А если мне нужно проставить не одну, а 10 точек на карте? А как быть, если у меня имеется база данных, в которой хранятся координаты точек, которые я хочу отобразить на карте в виде маркеров?

    Предлагаю Вам, да и всем пользователям Хабра протестировать сервис MyTaskHelper, который решает все заданные мною выше вопросы.

    Для того, чтобы отобразить данные на Гугл-карте, необходимо иметь БД с координатами точек (её можно как набить в MyTaskHelper, так и экспортировать из Excel). Всё, нажимаете пару кнопок-ссылок и карта с расставленными метками готова. Нажимаете ещё одну ссылку и получаете код, который можно встраивать в любой сайт.

    Понятно, что для того, чтобы хранить свои данные в системе, необходима регистрация. А протестировать сервис можно и зайдя под логином/паролем test/test.
    • НЛО прилетело и опубликовало эту надпись здесь
    • +3
      наймите уже нормального дизайнера, может ваш сервис и сила, но я постоянно его закрываю, как только шапка загрузится, подсознательно щелкает, что с таким дизайном ничего хорошего не выйдет.
      • –4
        В ответ можем только процитировать:
        «Попробовав, оказалось что у сервиса есть достоинства, которые могут перекрыть любые недостатки с дизайном. „
    • 0
      Все перечисленные Вами вопросы относятся к разработчикам.
      То, что предлагаем мы — никак не относится к специалистам.

      Вам как бы вообще сюда
      • –1
        Ссылка битая :)
        У нас все это есть и без Google API.
        А Вы что, не специалист?
        • 0
          Прошу прощения. Ошибся.
          По поводу «У нас все это есть и без Google API.» я же не спорю, может вы Яндексом пользуетесь или еще чем. Ваше право.

          По поводу «А Вы что, не специалист?» — не понял. Сервис разрабатывается для пользователей которые не разбираются в программировании. Все, что Вы перечислили можно сделать не напрягаясь. Но наш сервис предлагает НЕспециалистам сделать себе на сайт схему проезда. Зачем им знать координаты, зачем им знать, что такое база данных?
          Задача была простая — сделать просто и для тех кто не разбирается. Если Вам как специалисту нужны дополнительные функции, пожалуйста используйте Google Maps API и это будет правильно.
          • –1
            Никто про Google Maps API не говорит, никому это не нужно.

            Мы говорим, что MyTaskHelper.ru Map Builder это Ваш сервис + подпись к меткам плюс загрузка своего маркера.
    • +3
      Хватит уже саморекламы, задолбали.
    • +2
      АААА! Господи, что это за красная хрень у вас вместо хедера?!!! Зачем так людей пугать?

      У вас по-моему получилась сладкая конфетка завёрнутая в туалетную бумагу, вместо красивого фантика… брр… заплптите наконец дизайнеру…
    • 0
      Если уж имеется много всякого рода задач, то, Имхо, придётся таки ковырять и разбираться в Javascript, Google API, Jquery — по другому, пока никак думаю.
  • 0
    За сервис — спасибо, неплохая задумка. Только не хватает поддержки других источников карт — в частности OSM.
    Может ну нафиг этот гуглмап апи — все можно реализовать на OpenLayers — получите поддержку огромного количества webкарт и опенсорц основу
  • 0
    Спасибо, благодаря вашему сервису в очередной раз исползал пол-земли, просто увидев гугл-карту ))
    Кстати, наткнулся вот. Капитан очевидность отдыхает:
    y.makemap.ru/2o
    • 0
      А что это?
      • 0
        Это, видимо, перевод Atlantic Ocean, как себе это представляет гугл. Или я даже не знаю…
        • 0
          Тогда понятно, почему я не понял. У меня без перевода :)
          А как оно выглядит у Вас?
          • 0
            О как. А отчего зависит с переводом будет или без?
            У меня вот так вот:
            • 0
              Думаю, от системной локали.
              • 0
                Верно. Но у API существует возможность принудительного указания языка.
                Уже включил. Не зависимо от вашего местоположения язык теперь будет русский.
                • 0
                  >Не зависимо от вашего местоположения язык теперь будет русский.

                  Наверное всё же не местоположения, а именно системной локали. Дома, к примеру, местоположение тоже «англоязычное», но т.к. системная локаль русская, то и гуглокарты все по-русски.

                  Ну а так — да, теперь у меня тоже показывает «Атлантик Ошен». Ошен-ошен Атлантик :)
                  • 0
                    Не буду спорить.
                    Скорее всего так и есть.
  • +1
    Загрузку своего маркера сделайте.
    • 0
      Спасибо, это идея :)
      Но с другой стороны, с учетом, что сервис рассчитан на непосвященных пользователей, не думаю, что это приведет к хорошему результату.
      • +3
        Не думаю что пользователь о кнопку «Свой маркер» сломает руку.
  • +1
    Ещё бы подпись к метке?:)
    • –7
      И будет MyTaskHelper.ru Конструктор карт :)
      • 0
        У вас красивее и удобней)
        • –2
          Спасибо, пользуйтесь с удовольствием :)
          В ближайшее время читайте хабратопик на нашем корпоративном блоге:
          habrahabr.ru/company/mytaskhelper/blog/
  • +6
    Все-таки сомнительна полезность этого сервиса. По крайней мере в том виде, в котором он есть сейчас. Абсолютно все пункты, которые вы перечислили в «основных возможностях», «основных моментах» и «преимуществах» доступны через интерфейс гуглокарт, кроме того через стандартный интерфейс карт Гугла на карте можно размещатьи линии, и полигоны, и метки с балунами. То есть сделать можно карту типа такой. Ну и встроить ее на свою страницу можно без API KEY, ключ нужен только для того, чтобы на своем сайте средствами java-script взаимодействовать с картой.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Идея хорошая, только думаю, что если сервис создан как раз для схем проездов и очень близких к этой задач, то лучше сделать возможность генерации статичных карт.
    Ещё круто было бы, если пользователь, который хочет получить схему на свой сайт, вставлял в страницу что-то вроде:
    makeMap(['ул. Почтовая д.1', 'м. Севастопольская', 'ещё какой-то адрес'], 'Адрес назначения', 'elemID');
    Т.е. первым аргументом идет список адресов, от которых нужно проложить маршрут, вторым адрес назначения, куда этот маршрут ведет. А третьим аргументом передаем ID элемента на странице.
    Прописав эту строку получаем карту-схему на сайте. Разумеется все это можно визуально настроить, а потом получить вот такой коротенький код.
  • 0
    Вот бы еще div.lscad-container скрывать после загрузки карты :)
  • +2
    чем обусловлен выбор api v2 в ущерб api v3?
    • +1
      Уже ничем.
      Спасибо за замечание. Код изменен на V3
  • 0
    Ползунок «Высота карты» карты под картой, конечно, оригинально — водим мышью по воздуху и творим магию.
    • +1
      — Значок твиттера в опере залез на саму карту куда-то в район Химок.
      — Я бы сделал автосмену «Управления» к меньшему, если высота меньше размера, в который влезает контрол. Уродство же — карта высотой 100px и контрол увеличения в два раза больше по высоте, вылезающий за её пределы.
      • 0
        «Значок твиттера в опере залез на саму карту куда-то в район Химок»
        Исправил. Опера отобажает по своему «relative»

        «Я бы сделал автосмену «Управления» к меньшему, если высота меньше размера, в который влезает контрол. Уродство же — карта высотой 100px и контрол увеличения в два раза больше по высоте, вылезающий за её пределы. „
        Вы получаете тот результат который видите на карте. В любом случае спасибо за замечание. Я постараюсь реализовать в ближашее время.
        • 0
          У большинства компаний какие-то проблемы с схемами проезда на сайтах.
          Попробуйте копать в эту сторону — интерфейсы для секретарш, которые хотят разместить схему проезда — делаются в 2 счета на API гугла, но требует знакомства с ним.
          • 0
            Я и копаю в эту сторону :)
            По моему сейчас все достаточно просто и удобно.
            Если у Вас есть замечания по этому поводу я с удовольствием выслушаю их

            PS: Ваши замечания по поводу автосмены управления учтены и уже реализованы. Спасибо.
          • 0
            А у меня сегодня какие-то проблемы с грамматикой: О
    • 0
      Спасибо за замечание. Проблема устранена.
  • 0
    Симпатично, но точку на карте я мог и в гугле поставить.
    А тот функционал, который есть сейчас ничего интересного не предлагает, даже банально поставить две точки разных цветов — все… функционал на этом закончился, а печально.
  • 0
    Сделайте возможность писать текст на точке (т.к. точек может быть несколько).

    + Сделайте возможность выбора между гуглокартами и яндекс.картами, т.к. гугль ещё не покрыл всю Россию.
    Например ДВ. Как житель Владивостока протестую. И Вам, и гуглу. :))

    Жду конструктор карт, это наподобие прокладки маршрута, например здание находится где-то во дворе, и можно советовать откуда лучше подъехать.
  • +1
    Без API реализация простого подбора маршрута из места, указываемого пользователем (его дома, например), до другого места (офиса компании, например) реализуется парой десятков строк размашистым почерком, если без свистелок и перделок. Можно и со свистелками.
  • +2
    У Яндекса такая штука уже есть, «Конструктор схем проезда» называется: api.yandex.ru/maps/tools/constructor/
  • –2
    PPS: Хабраэффект ожидаем. Заранее приношу извинения за возможную недоступность сервиса.


    Вот писали бы эту фразу первой, чтобы уже и не смотрели люди. В чём смысл делать сервис, который падает от хабраэффекта?
    • 0
      Сервер держится молодцом. Проблем замечено не было.
      • 0
        А причем тут сервер? Хабраэффект настигает не слабые серверы, а криворукие сайты. Поэтому это равносильно «Для просмотра сайта рекомендуем пользоваться русской версией Microsoft Internet Explorer 3.02 для Windows-95» в стародавние времена. Ну это поворчал над неразумностью фразы просто, вдруг там инвесторы увидят :)
  • +1
    Нужна возможность переключения на ЯК, т.к. гуглокарты в нашем городе на данный момент детализированы куда хуже.
  • +1
    Ну и конечно не помешает отправка ссылки в твиттер, и другие сервисы…
  • +1
    Начиная с версии 3, Google API Key не нужен.

    Так что это преимущество

    Для встраивания карты в свой сайт не требуется получения Google API Key

    уже не актуально.
    • 0
      Да. Согласен.
      В ближайшее время сервис будет изменен под V3
    • 0
      Поменял API на третью версию.
  • +1
    а местоположение кто определяет? Просто я опять в Новгороде живу :(, а так вообще то в Нижнем Новгороде.
    • 0
      Используется GeoLite City от maxmind.com
      Видимо у них закралась ошибка в базу.
      • 0
        ну тогда все ясно — практически любая буржуйская база кривит этим — Нижний Новгород и Новгород.

        Гугл этим тож очень долго грешил — сейчас вроде исправили.

        В этом отношении российские базы лучше (ну по крайне мере по России)
        • 0
          У API V3 есть определение координат пользователя.
          Но работает только не во всех браузерах, посему пока решил сделать через GeoLite.
  • 0
    А можно отключить плавноанимированное падение маркера и подобное? Тормозит чесслово.
    • 0
      Насколько я понял «падение маркера» при перетаскивании — стандартное отображение API версии 2.x
      В третьей версии это убрали. Сейчас как раз занимаюсь изменением кода под API V3. Спасибо тем кто сделал замечание — удобнее.
  • +1
    Сделайте возможность вводить размеры карты не только ползунком, но и численно
    • 0
      Сделаю.
      В планах сделать переключение между ползунками и вводом точного значения.
    • 0
      Сделано.
      Спасибо за предложение.
  • 0
    Совсем недавно новокузнецкие товарищи сделали вот такой конструктор схем проезда blognya.ru/lab/2gis/ (они могли бы дождаться API, но сделали по-своему — их право). Мне видится, что интерфейс подобного инструмента примерно таким и должен быть. Тут уж точно неподготовленный пользователь не заблудится.
    • +1
      Я делал упор на визуализацию и минимальные знания пользователя.
      По Вашей ссылке хороший сайт, но концепция отличается.
  • 0
    Было здорово, если бы появилась возможность поставить свою иконку метки для карты. Видел на сайте какой-то студии карту Гугл с их логотипом на здании, выглядит интересно.
    • 0
      Судя по количеству запросов этой возможности. Придется сделать :)
      Поставлю в планы.
  • 0
    Как совет — посмотрите, я для своей компании делал карту магазинов — локатор. Может возьмете какие-то идеи, намучился я с этими картами в свое время.
    www.velux.ru/Private/WhereToBuy/Map.aspx

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

    Еще было бы неплохо добавлять несколько маркеров, но тут уже будет вопрос копировании функционала гугла — плюс вашего сервиса в его быстроте использования.
    • 0
      «Кстати, ели у вас поставить маркер на карту, а потом попытаться изменить дизайн иконки, то маркер остается прежним.»
      Так маркер и должен оставаться на месте. Я не понял замечания.

      По поводу Вашей ссылки — спасибо, внимательно посмотрю.
  • 0
    хороший, если не забуду воспользуюсь когда-нибудь))

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