Скачать

Что это?

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


Как использовать

Для работы плагина требуется jQuery версии 1.3.2 и выше, это связано с некорректной обработкой селекторов в младших версиях. И хотя одно время там и был хак для совместимости с 1.3.0, я предпочёл от него отказаться.

$(document).ready(function(){
 $("#search-map").Gmap({
   //опции, используемые для отображения маркеров
  show_points: {
   lat: "lat", //name массива с данными о широтах,
               //input type="hidden" name="lat[0]"
   lng: "lng", //аналогично lat
   infowindow: "infowindow", //аналогично lat

   //частные настройки иконок маркеров, отображаемых на карте
   marker: {
    icon: "icon", //name массива с данными об иконках маркеров
             //input type="hidden" name="icon[1]" value="/img/caution.png"
    shadow: "shadow" //аналогично marker.icon
   },

   //нативные для API v3 опции инфоокна
   infowindow_options: {
    disableAutoPan: true
   },

   autofit: true, //увеличить ли во время инициализации карты её масштаб
       //максимально настолько, чтобы были видны все отображаемые объекты

   //общие настройки иконок маркеров, отображаемых на карте
   icon:{
    src: "http://maps.google.com/mapfiles/ms/micons/purple.png",
    shadow: "http://maps.google.com/mapfiles/ms/micons/pushpin_shadow.png"
   },

   //группировать ли маркеры
   group_markers: true,

   //нативные для markermanager опции
   markermanager_options:{
    icon: {
     src: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.png",
shadow: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.shadow.png"
    },
    cell: {
     width: 48,
     height: 96
    }
   }
  },

  //опции геокодирования
  geocoder: {
   //уточнение запроса, может быть либо строкой, либо id элемента, в этом
   //случае в качестве строки уточнения будет взят его innerHtml
   clarification: "Петербург",

   //id инпута, из которого производится геокодирование
   target: "search_id",

   //приоритетные границы геокодирования
   bounds: {sw: [37, 40], ne: [80, 140]},

   //приоритетная страна геокодирования
   country: "RU",

   //приоритетный язык геокодирования
   language: "ru",

   //в случае успеха геокодирования выставляет данный масштаб
   success: {
    zoom : 8
   },

   //настроки автогеокодирования, два варианта - onkeyup и onchange
   auto: "onkeyup",

   //задержка в геокодировании, используется в режиме {auto: onkeyup}
   delay: 3000,

   //параметры иконки маркера результатов
   icon: {
    src: "http://maps.google.com/mapfiles/ms/micons/question.png",
    shadow: "http://maps.google.com/mapfiles/ms/micons/question.shadow.png"
   },

   //id элементов для транслирования им результатов геокодирования - ширина,
   //долгота, точность.
   track_coordinates:{
    lat: "lat",
    lng: "lng",
    accuracy: "accuracy",
    infowindow: "Вроде бы это здесь...", //что отображать в инфоокне при
                                         //уточнении

   //нативные для API v3 опции маркера
    marker_options: {
     draggable: true
    }
   }
  },

  //начальные параметры карты в нативном для API v3 формате
  initial:{
   draggable: true,
   zoom: 5,
   center: [58, 35],
   mapTypeControl : true,
   scaleControl: true,
   min_zoom: 20 //минимально разрешённый масштаб карты
  }
 });
});
Посмотреть пример в отдельном окне
Обновить окно примера


ДРУГИЕ НАШИ РАЗРАБОТКИ

— Удобные маркеры для гуглокарт
Плагин позволяет отображать множество маркеров на карте с кастомными иконками и информационными окнами, группировать (опционально). Так же есть возможность указать целевой инпут, который будет использоваться для геокодирования, перетаскиванием маркера вручную корректировать результаты и отслеживать их изменение.
— группировка маркеров на карте
Класс для группировки маркеров на картах Google, использует Google Maps Javascript API V3, написан на нативном JS без использования каких-либо фреймворков.

КОНТАКТНАЯ ИНФОРМАЦИЯ

  • Телефон в СПБ: +7 812 448-84-16
  • Телефон в Мск: +7 495 721-88-57

Почтовый адрес: 196084, Санкт-Петербург,
ул. Малая Митрофаньевская, д.4, ООО «Инлайн»