Часто возникает потребность отобразить на карте множество объектов (объекты компании, офисы, порты, компании и т.д.) и возникает вопрос как это реализовать. В данной статье я расскажу как это делается на MODx Revolution.

Чтобы начать нам необходимо создать TV-параметр с типом ввода текст, где будут хранится координаты объекта, который мы должны отобразить на карте. Пусть он будет иметь имя coord. Забьем несколько тестовых координат для наших будущих объектов и пойдем дальше.

Итак, далее нам нужно создать саму карту и инициализировать ее, вставляем данный код между тегами <script>:

 
var map;
function initialize() {
  var mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(31.595540, 23.228599),
    mapTypeId: google.maps.MapTypeId.HYBRID,
    minZoom: 2
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
	FullScreenControl(map, 'Открыть в полном размере','Нормальный размер'));
  }
google.maps.event.addDomListener(window, 'load', initialize);

Здесь содержится код предыдущего урока, позволяющего открывать карту в полном размере, так что не забудьте подключить перед этим кодом API Google Maps и данный плагин:

 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="js/FullScreenControl.js" type="text/javascript"></script>

Следующим шагом создадим чанк mapTpl, через который будут генерироваться метки на карте (не забудьте удалить пробелы между квадратными скобками):

var infowindow[ [+idx] ] = new google.maps.InfoWindow({
content: "[ [+pagetitle] ]"
});

var marker = new google.maps.Marker({
  position: new google.maps.LatLng([ [+tv.coord] ]),
  map: map,
  title:"[ [+pagetitle] ]"
});

google.maps.event.addListener(marker[ [+idx] ], 'click', function() {
    infowindow[ [+idx] ].open(map,marker[ [+idx] ]);
  });

Подробно про генерацию меток можно прочитать в документации к API Google Maps.

Теперь нам осталось вызвать getResources с подходящими нам параметрами в коде инициализации карты и карта будет работать. Полный код инициализации:

var map;
function initialize() {
  var mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(31.595540, 23.228599),
    mapTypeId: google.maps.MapTypeId.HYBRID,
    minZoom: 2
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
    FullScreenControl(map, 'Открыть в полном размере','Нормальный размер'));
		
  [ [getResources?
    &parents=`7`
    &depth=`0`
    &tpl=`mapTpl`
    &includeTVs=`1`
    &limit=`0`
  ] ]
}	  
google.maps.event.addDomListener(window, 'load', initialize);

Здесь getResources берет все дочерние элементы контейнера с id равным 7, включает в выборку TV-параметры и выводит через созданный нами чанк mapTpl.

Принцип такой же как и при выводе новостей, статей и т.д.