Интегрируем google maps

    Google maps — отличное средство для картографии и сейчас мы будем интегрировать его себе на сайт благодаря открытому API. Интегрировать будем не только фиксированное положение но и произвольное, а именно — создадим в базе данных таблицу «locations», впишем там поля title, x, y.

    Теперь нам надо редактировать каждое местоположение. Создадим полотно, где будет отображаться карта.
    <div id="map" style="width: 250px; height: 250px"> </div>

    Дальше — прикрутим вызов библиотеки из google. Поскольку я использую smarty, то я передаю ключ разработчика в виде переменной.
    <script src="http://maps.google.com/maps?file=api&v=2&key={$google_maps_hash}" type="text/javascript"></script>


    Теперь сделаем функцию, которая будет заниматься всей гразной работой — создавать карту в нашем div элементе, позиционировать согласно заданным координатам, устанавливать bubble. В случае если мы редактируем эти координаты, то функция будет по обратной связи прописывать в скрытые input-поля некоей формы «registration_form» новые координаты перенесённого pin-указателя.
    <script type="text/javascript">
    function load_map(x,y,title) {

    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(x, y), 13);
    map.enableScrollWheelZoom();

    point = new GLatLng(x, y);
    marker = new GMarker(point);

    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.addOverlay(marker);
    marker.openInfoWindowHtml(title);
    /*
    var mgr = new GMarkerManager(map);

    GEvent.addListener(marker, "dragend", function() {
    //var center = map.getCenter();
    var strCenter=marker.getPoint();
    marker.openInfoWindowHtml(document.forms['registration_form'].title.value);
    document.forms['registration_form'].geo_x.value=strCenter.lat();//arrCenter[0];
    document.forms['registration_form'].geo_y.value=strCenter.lng();//arrCenter[1];

    });
    */
    }
    }
    </script>

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

      0
      Насчет интеграции google maps, недавно (после каких-то действий со стороны гугла) всплыла проблема такого рода:
      если интегрировать на не-UTF-8 сайт, то при отображении в IE плывут русские символы (а они в подписи), увидеть пример можно здесь http://mialauto.ru/contact.html
      как-нибудь решали эту проблему ?
        0
        Не приходилось, всюду стараюсь utf-8 использовать.
          0
          Аналогично, но все-таки есть проблемы со старыми сайтами. Вообще это проблема сервиса, вот только они что-то не торопятся её исправлять
          0
          попробовали несколько вариантов. не помогает.
          0
          Нет никакой проблемы, надо добавить параметр charset у скрипта, который подключаем.

          <script type="text/javascript" charset="utf-8" src="http://maps.google.com/maps?file=api&v=2&key={$google_maps_hash}">
            0
            Спасибо за информацию!
            Возник другой вопрос - на карте есть надпись "Картографические данные...". Она очень длинная, а ширина встраиваемой карты небольшая. Возможно ли как-то уменьшить надпись / убрать ее совсем / сделать в 2 строки ?
              0
              Да, к сожалению гугл не предоставляет возможности как-то переместить свои копирайты. Насколько я понимаю, — проблема такая-же как совсем недавно встала перед нами:
              Маленькую карту невозможно нормально вставить на сайт, т.к. копирайты вылезают за границы. Мы решили эту проблему с помощью iframe.
              На странице вставляем:

              <iframe width="235" height="235" src="google_map.php?diller=34" marginheight="0" marginwidth="0" frameborder="0" scrolling="no"></iframe>

              а в самом google_map.php и отрисовываем карты в зависимости от диллеров. Таким образом мы ничего не нарушаем, но отрисовывается только часть копирайтов. Но мы то тут типа и ни причем.

              В принципе, при желании, таким образом можно скрыть копирайты. Отрисовывать карту высотой 270px, а фрейм показывать высотой 235px. Но так делать нехорошо. Тем более, что если ресурс будет какой-то особо-посещаемый, то гугл может и забанить. Поэтому совсем скрывать копирайты не советую.
                0
                Спасибо за пояснения! Карту решено перенести на отдельную страницу и сделать больше (не из-за копирайтов:)). Но все-таки саму проблему не решает...
            0
            и где на http://mialauto.ru/contact.html что нибудь про google maps?
            0
            Спасибо, полезный материал.
              0
              Кхе, кхе. Переместите, пожалуйста, в "Уроки французского". Этот материал там сильно пригодится.
                0
                простветите идиота :)
                Сам я не программер :)
                можно или на сайт интергрировать гуглмапс, так чтобы на нем зарегистрированные пользователи могли ставить точки? Именно зарегистрированные на моем сайте, а не в гугле. И чтобы на карте соотвественно отмечались только точки данного комьюнити, а не все гугловские.

                заранее спасибо :)
                  0
                  да, точки на карте расставляет Ваш js, и считывать точки которые пользователь выбрал на карте тоже должен Ваш js. Так что все в Ваших руках :)
                    0
                    отлично! :) понял, спасибо :) Главное это возможно :)

                    кстати, а Яндекс такое не позволяет сделать?
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      В приведённом выше коде в закомментированной части и есть версия для редактирования маркеров. В этом и вся суть статьи, что пользователи могут не только читать карту, но и устанавливать свои места, другое дело позволять ли это всем или только админам.
                      0
                      Скажите, а возможно ли интеграция GoogleEarth на сайт?
                        0
                        Если нет открытого API то пожалуй очень сложно. Но можно поизвращаться - отвести для этого отдельный сервер и делать там скриншоты, их выкладывать в сеть в режиме реального времени, а управление сделать через remote desktop, ну или декомпилировать и создать свой API. Не представляю кем надо быть что-бы такую работу проделать.

                        Вроде бы есть COM API, лучше начать с этого.
                        0
                        Все, синтегрировал, только ссылку не дам (не хочу что поисковик раньше времени меня проиндексировал)
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • НЛО прилетело и опубликовало эту надпись здесь
                            • НЛО прилетело и опубликовало эту надпись здесь
                              • НЛО прилетело и опубликовало эту надпись здесь
                              0
                              тоже часто это замечал.. незнаю почему по умолчанию они это отключили, может из-за того что-бы когда скроллишь по странице и курсор натыкается на карту, то страница перестаёт скроллиться..
                              map.enableScrollWheelZoom(); //решает эту проблему в данном случае
                              • НЛО прилетело и опубликовало эту надпись здесь
                            • НЛО прилетело и опубликовало эту надпись здесь
                                +1
                                а как можно задать высоту и ширину для функции openInfoWindowHtml() ?
                                  0
                                  openInfoWindowHtml( "content", { maxWidth:270 });
                                  сам еле нашел :)
                                  0
                                  нужна помощь: сделал карту, сделал свои иконки (маркеры) для своих офисов — но кликать на всю иконку (маркер) не получается! Кликаешь как бы на старый маркер, который по дефолту. Настроек не нашел.
                                  ссылка: advokat-chernov.ru/?razdel=contact

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

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