Что нам стОит карту пользователей построить?

    Несколько недель? назад прочитал на хабре про интеграцию с google maps. К сожалению не нашел ссылку, но смысл в статье шел о городском сайте на который пользователи могли самостоятельно добавлять объекты на карту. Идея выглядела довольно сексуально, но в комментах автор признался, что писАл этот функционал несколько месяцев((

    Данный факт поверг меня в жёсткое уныние(
    Анализ скриптов на симпатичных сайтах интегрированных с gmaps, навроде этого
    dom показывал внушительные километры кода… И так бы я и продолжал сидеть в депрессии, пока случайно не забрел таки на сайт с хелпом от собственно гугла.

    И как выяснилось — вся информация о сроках и объемах этой задачи как минимум саботаж и провокация! Итак, строим карту пользователей на основе сервиса Google maps
    Примерно такую:



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

    Итак, для приготовления примитивной карты пользователей нам понадобятся:
    — Одна таблица
    — 1-2 html
    — пару PHP
    — пару скриптов
    Maps API Key
    Одна голова и как минимум один палец. Итого 3-4 экрана кода у нас получится.

    Так как хабр не дружелюбен к подсветке синтаксиса исходников — я буду на них давать ссылки а тут коротко описывать о чём там.

    Таблица нам понадобится:
    CREATE TABLE `prefix_markers` (
    `id` int(11) NOT NULL auto_increment,
    `name` varchar(180) default NULL,
    `hello` varchar(180) default NULL,
    `lat` float(10,6) NOT NULL default '0.000000',
    `lng` float(10,6) NOT NULL default '0.000000',
    `sex` varchar(4) NOT NULL default '',
    `login` varchar(32) NOT NULL default '',
    PRIMARY KEY (`id`)
    )


    Теперь в неё надо записи залить. Для этого нужна html-ка где мы покажем карту, пишем в html-ке, в районе хидера примерно так:

    <? $loadmaps = "" ?>
    <? if (strstr($_SERVER["REQUEST_URI"],'maps')) {?>
    <script src="http://maps.google.com/maps?file=api&v=2.x&key=Тут Ключ API"
    type="text/javascript">

    <? if (strstr($_SERVER[«REQUEST_URI»],'add')) {?>

    <? $loadmaps = " onload='initialize()' onunload='GUnload()' "?>
    <?}?>
    <? if (strstr($_SERVER[«REQUEST_URI»],'show')) {?>

    <? $loadmaps = " onload='load()' onunload='GUnload()' "?>
    <?}?>
    <?}?>



    Вы извините, но если там все будет некрасиво отформатировано — я не виноват)
    Там в зависимости от url заполняеется переменная loadmaps
    которая затем выводится вот сюда: <body <?=$loadmaps?>
    Такой изврат — потому что у меня шапка сайта одна, но в зависимости от того, что нужно — «показать» или «добавить» на карту — разные скрипты подключаются. Обещаю, дальше будет проще. Наверно)

    Соответственно внутри боди html-ки которая отвечает за отображение на карте- пишем:


    А которая за добавление:
    />
    />





    Уфф, с htmlками разобрались. Сейчас у нас есть 2 htmlки с пустыми картами. Осталось на первой сделать добавлялку людей, а на второй — отображалку)

    Скрипт добавления — вот он, злодей

    Там вроде все понятно. В initialize — маркер создается, при клике показываются поля куда мы вводим торжественный «Превед»
    В showAddress — показывается карта с центрированием на адресе введенном пользователем
    В saveData данные сохраняются путем вызова урла с параметрами через аякс
    new Ajax(urlinsert, {method: "post"}).request();

    Это mootools библиотеки синтаксис, его надо тоже подключить в хидере как ть)

    А, ещё там функция escape используется повсюду, это неправильная функция, потому что сайт у меня тоже неправильный. В неправильной кодовой странице 1251. Вам она не нужна. Наверно. Во всяком случае судя по комментам на хабре неправильных сайтов в интернете вообще нет, все только в правильной UTF-8. Ну за исключением собственно самого хабра и ещё пары сайтов.

    Таакс, значит скрипт этот вызывает у нас файл insert.php Там все скучно, вообще жесть, просто записи инсертятся:
    // Selects rows in the markers table 4 current user
    $query = "SELECT id FROM prefix_markers WHERE login='".$login."'";
    $result = mysql_query($query);
    $row = @mysql_fetch_assoc($result);
    //$hello = mb_convert_encoding($hello,"Windows-1251","UTF-8");

    if ($row['id']>0){
    //update row with user data
    $query = "UPDATE prefix_markers SET " .
    " name='".urldecode($name)."', hello='".$hello."', lat='".$lat."', lng='".$lng."', sex='".$sex."' ".
    "WHERE id = '".$row['id']."'";
    $result = mysql_query($query);
    $res = $row["id"];
    }else{
    // Insert new row with user data
    $query = "INSERT INTO prefix_markers " .
    " (id, name, hello, lat, lng, sex, login ) " .
    " VALUES (NULL, '".$name."', '".$hello."', '".$lat."', '".$lng."', '".$sex."', '".$login."')";
    $result = mysql_query($query);
    $res = "Insert";
    }


    Скукотища…
    Но после того как запрос выполнился-у нас сразу открывается show.php
    newurl = currurl.substring(0,currurl.length-4 ) + "/show";
    ..
    new Ajax(urlinsert, {method: "post"}).request();
    self.location.href=newurl;


    Вот. Но он пустой) Он тупо открывает htmlку show
    $template = "themes/".$config['theme']."/templates/".$config['templates']['user_maps_show'];
    viewTemplate($template);


    Воот. Теперь на сцену выходит скрипт show
    Там вообще все понятно. Создается синяя (не голубая!) иконка для мальчиков, красная для девочек, создаются маркеры, скукота. Единственный подозрительный момент — это вызов urlxml = baseurl+"/user/maps_xml.php";

    Вот он:
    function parseToXML($htmlStr)
    {
    $xmlStr=str_replace('<','<',$htmlStr);
    $xmlStr=str_replace('>','>',$xmlStr);
    $xmlStr=str_replace('"','"',$xmlStr);
    $xmlStr=str_replace("'",''',$xmlStr);
    $xmlStr=str_replace("&",'&',$xmlStr);
    return $xmlStr;
    }

    $query="SELECT *, (SELECT id FROM prefix_user as usr WHERE usr.login = markers.login) AS usrid FROM prefix_markers as markers";
    $result = mysql_query($query);
    //$result = mysql_query($query);
    if (!$result) {
    die('Invalid query: ' . mysql_error());
    }

    //header("Content-type: text/xml");

    // Start XML file, echo parent node
    echo '';

    // Iterate through the rows, printing XML nodes for each
    while ($row = @mysql_fetch_assoc($result)){
    // ADD TO XML DOCUMENT NODE
    echo '<marker ';
    echo 'name="' . parseToXML($row['name']) . '" ';
    echo 'hello="' . $row['hello'] . '" ';
    echo 'lat="' . $row['lat'] . '" ';
    echo 'lng="' . $row['lng'] . '" ';
    echo 'sex="' . $row['sex'] . '" ';
    echo 'login="' . $row['login'] . '" ';
    echo 'usrid="' . $row['usrid'] . '" ';
    echo '/>';
    }

    // End XML file
    echo '';

    exit();


    Ураа!!! (Замучался писать) Ах, да. По уму — это должен быть статичный файл, а не скрипт кот. в xml из БД выгружает на лету…

    Вооот. Вобщем все это просто куски кода с примеров гугла сведенные воединно. Наверняка можно их свести в другой последовательности с другими кусками и получится сосвсем другой результат) Гораздо лучше — 100%

    Посмотреть что должно получиться в итоге после всех этих плясок с бубном — можно тут (осторожно, сайт содержит эротические материалы)
    Кнопка «карта». Без регистрации — не работает потому что… — да сами только что все исходники видели) Потому и не работает)

    PS: Жутковатая какая-то статья получилась. И по стилю и по доступности. Одна надежда, что может кому то поможет) Если совсем всё плохо и непонятно — напишите плз в комментариях постараюсь доработать.

    Средняя зарплата в IT

    110 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 8 355 анкет, за 2-ое пол. 2020 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

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

    • НЛО прилетело и опубликовало эту надпись здесь
        0
        код написан плохо,не спорю(
        как всегда торопился чтоб заработало в надежде потом вернуться и причесать. И как всегда потом находятся ккие то срочные дела. А через месяц неожидано всплывает ошибка в непричесанном куске кода(
          0
          Спасибо! Отличный материал, не шедевр конечно, НО такие материалы очень помогают начать и не пугаться всяких там мегапи и мегадокументации. Теперь каждый потратив пару часов сможет повторить для себя такую "программу минимум" и разобравшись и воодушевившись - продолжить развивать проект под свои нужды и развиваться самому.
          • НЛО прилетело и опубликовало эту надпись здесь
          –2
          Спасибо за статью, конечно.. но Ваш стиль кода ужасен!
          • НЛО прилетело и опубликовало эту надпись здесь
              –5
              такому программированию учить не нужно, прошу прощения
                +2
                п*здеть — не мешки ворочать.
                  +1
                    0
                    а я и не учу. Просто хотелось показать на небольшом примере что интегрироваться с картой несложно. Всё.
                    ЗЫ: симпатичная у Вас карта. Вот только добавить на карту новую заметку - не получилось( Я что то не так делаю или красивый код не всегда равно рабочий? ;)
                      0
                      только что эту заметку добавил
                      там рядом еще карта есть с кастомными тайлами - код простой достаточно
                        0
                        Да, всё работает, сори. Но на событие перетаскивания маркера предлагать диалог добавления комментов - по- моему не очень очевидно. Я например долго кликал по маркеру, добавлял новые. Ну или хотя бы запретить добавлять больше 1 маркера тогда. "Чтоб таскали".
                          0
                          Да, согласен что на клик по карте надо бы по-хорошему повесить обработчик. А уже по клику на карте добавлять маркер.
                      +3
                      дело не в вашей компетенции или ее отсутствии. а в том, что вы ведь не поделились опытом изучения этого апи с общественностью? Ну и, наверное, приведенный пример - не собранная на скорую руку демка, созданная в процессе изучения документации, а ваша работа?
                      Я вот благодарен человеку, за то что он просто выложил это сырье, сразу как только оно заработало, а не доводил его до совершенства - уверен при желании но может это сделать не хуже чем любой из нас. Просто он не постеснялся, правильно рассудив, что главное - показать как вообще работает этот механизм.

                      Так что критиковать стиль (которые даже не подразумевался - более того имелся на этот счет дисклаймер) - а тем более, вот так "в целом" - высшей степени некорректно, имхо.

                      Это было бы оправданно, если бы автор преподнес труд нескольких месяцев, созданный как демонстрация своего мастерства - но ведь это не так. Зачем срать в камментах? Ради самоутверждения?

                      То же самое относится не только к вам в этом топике. Здесь это явление распространенное. Так что не примите за наезд - просто поймите эти аргументы.
                0
                простой и наглядный пример. достойно быть занесено в del.icio.us
                  0
                  взял на заметку. спасибо.
                  только очень тормозит и я не пойму почему, то ли у меня с компьютером что-то не то, после всех экспериментов, то ли код очень задумчивый.
                    +3
                    Спасибо. Давно ждал подобного мануала. Не критику кода не обращайте внимания (т.е. обращайте, но не комплексуйте!) - иначе никогда ничего не выложишь на обозрение - будешь действительно два месяца "причесывать" его и рефакторить и красиво форматировать.
                      0
                      А кто девушку в чёрном море утопил? Извращенцы)
                        0
                        Сам сейчас ковыряю google maps приблизительно в том-же направлении.
                        Да, действительно, все довольно просто, только MarkerManager злобно отказывается работать.

                        А так на вскидку: у вас, например, не все маркеры убираются на карту, т.е. кликнул на рыбные места (которых я так понял 2) одно появилось-- а второе фиг вам- ищите сами. Хотя на самом деле сделать ресайз карты не так сложно, делается это при помощи класса GLatLngBounds, только это не описано в примерах.
                          0
                          В конце предложения надо ставить точку, а не скобку.
                            0
                            спасибо, возможно применим эти знания у себя в проекте.
                            Только не нравится, как вы уже второй раз подряд даёте ссылку на свой сайт с сомнительным содержанием... кхм, извините, но это неправильно
                              0
                              А что посоветуете в данной ситуации? Не давать ссылку вообще?

                              Содержание.. Не знаю, почему принято считать подобное содержание
                              "сомнительным". Порно там нет. А секс, эротика... Мы же все здесь взрослые люди? Каждый день (почти) занимаемся сексом) Но почему то говорить об этом считается "сомнительным". Наверно я дурно воспитан, так как ничего предрассудительного в этом сайте не вижу)
                              Извините, если задел Ваши моральные принципы. Не хотел. Постараюсь "воздерживаться" по возможности)
                                0
                                Хотя если честно, немножко хулиганства в этом есть. Вы правы)
                                  0
                                  да ничего, но а вдруг у меня за спиной был начальник? Перехожу посмотреть результаты труда, а таааам =)
                                +1
                                Выкладываю похожие заметки по веб-картографии вообще и Google Maps в частности у себя. Тоже больше технического плана. Смотрите — пользуйтесь.
                                  0
                                  Здорово! Спасибо
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    Гугакарты использует сейчас каждый третий. А самый хороший мануал — на Гугле. А все остальное — это уже приспосабливание карт под конкретный проект + бантики.
                                      0
                                      если на изображении отмечено твое реальное место жительства, то мы значит соседи :)
                                        0
                                        прикольно)
                                        0
                                        Вот исходная ссылка, которую ты не смог найти http://habrahabr.ru/blog/i_am_clever/280…
                                          0
                                          добавляем объекты как есть
                                            0
                                            тоесть, линк на маркеры -> http://econym.googlepages.com/tooltips.htm - хороший пример в двух строчках кода (данные берутся из XML той же библиотекой gmaps)
                                              0
                                              Как можно обойти следующую проблему. Есть карта Москвы с заданными координатами продаж готового бизнеса - примерно 300-350.
                                              Загрузка всех иконок - флажков требует большого периода времени. Возможно, ли как то реализовать постепенную подгрузку всех
                                              флажков?

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

                                              Самое читаемое