Карта с маркерами. Вывод точек на Google Maps

Поиск по карте - это отдельный режим работы компонента Таблица.
Смотреть пример карты с точками

Как настроить карту

Для показа карты, необходимо сделать следующее: 

1. Создать таблицу с колонками (все строки).
1. id - идентификатор точки (для возможных операций с точкой).
2. lat - долгота точки.
3. lng - широта точки. 
4. description - описание, которое появляется в окне при клике на маркер точки.
5. tooltip - всплывающая подсказка при наведении на точку. 
6. label и labelClass - задают текстовую метку, которая видна на маркере, пример указания класса 'btn btn-info p-0 mb-5 font-weight-bold text-white' labelClass
7. icon - URL к картинке маркера (по умолчанию используется стандартный красный маркер)
8. radius - радиус региона. 
9. canDrag - если 1, то точки можно перемещать по карте и сохранять в базе новые значения (при перемещении вызывается updateItemField с code=marker, id=id точки и value = "lat||lng")
10. Дополнительно можно добавить следующие столбцы (стилизация точек и регионов) 
    1. fillColor: '#a0bfeb',
    2. fillOpacity: 0.2,
    3. strokeColor: '#000000',
    4. strokeOpacity: 1,
    5. strokeWeight: 1.
2. Прописать запрос GetItems
   1. MapShowUserLocation bit - показывать пользователя на карте? 
   2. MapUserImageUrl nvarchar(256) - путь к картинке пользователя.
   3. MapShowAllRegions bit - показать все локации обслуживания всех точек.
   4. MapShowLocationInRange bit - показать локацию, в которую попадает пользователь
1.   SELECT 1 (с колонками id int, lat nvarchar(32), lng nvarchar(32), description nvarchar(max), tooltip nvarchar(128), radius int)
2. в SELECT 3 ставим ViewType='map', дополнительные параметры в SELECT 3 

1. Карта будет работать только в случае, если вы указали ключ Google API в GetLayout (GeoLocationKey).
2. В description к маркеру можно вставлять сниппеты компонентов (например, Форму). Инициализация компонентов идет по клику на маркере.
3. В общем случае моменты с координатами передаем в формате lat||lng||text_address (в UpdateField передается lat||lng)

CREATE PROCEDURE [dbo].[crud_testMap_updateField]
	@itemID int,
	@field nvarchar(64),
	@value nvarchar(max),
	@username nvarchar(64)
AS
BEGIN

if(@field = 'marker') begin
	declare @lat nvarchar(32), @lng nvarchar(32)
	set @lat = [dbo].[str_splitPart](@value,  '||',	1	)
	set @lng = [dbo].[str_splitPart](@value,  '||',	2	)

	update tst_addresses
    set lat = @lat, lng = @lng
    where id = @itemID
end else begin
	select 'Невалидный код свойства' Msg, 0 Result
	return
end
select '' Msg, 1 Result

END

В SELECT 3 также можно передать параметр mapOptions, в котором устанавливаются настройки карты в виде JSON. Документация по настройкам карты Гугл - https://developers.google.com/maps/documentation/javascript/interaction

Пример настройки: 

-- 3 SELECT Дополнительные настройки таблицы
select 'map' ViewType,
	0 MapShowUserLocation,
        '' MapUserImageUrl,
        0 MapShowAllRegions,
        0 MapShowLocationInRange,
        1 HideTitleCount, ' ' Title,
            '{
                "center":{"lat": 39.913818, "lng": 116.363625},
                "zoom": 4,
                "fitBound": false,
                "afterMoveMarkerRefreshContainer": "body"

            }' MapOptions

Кастомные настройки (которые не относятся к плагину карты Google). 

• fitBound - если 1, то карта будет адаптировать zoom и область, чтобы вывести все выбранные точки. 
• afterMoveMarkerRefreshContainer - указываем селектор контейнера, который надо обновлять после перемещения точки (например, чтобы обновить какую-то форму или таблицу на странице).
• mapCenter - задает центр карты в виде {"lat": 12.34234, "lng": 43.2321}

Кастомизация иконки маркера на карте

Параметр icon в SELECT 1 GetItems можно задавать 2 способами:

либо просто строка, которой ссылка на URL картинки для маркера,

либо JSON объект с указанием URL и размера: 

'{
               "url": "/uploads/3.jpg", 
               "size": 50
}' icon

если icon пустой, то используется значок маркера по умолчанию и размер 20. 

Возможные проблемы с картой

Если появляется серый прямоугольник вместо карты и нет ошибок в консоли, это означает, что вам необходимо установить параметры zoom и mapCenter. Пример: 

-- SELECT 3
SELECT  '{
        	"zoom":9,
            "mapCenter": {"lat":55.760533, "lng": 37.487028}
        }' MapOptions

Альтернатива - использовать fitBound=1 (в этом случае карта (ее center и zoom) будет адаптироваться под точки на ней).