Задача:
По клику на ссылки вида a.store-title проверять у них атрибут data-store-id и выводить информационное окно у Маркера, у которого свойство id совпадает с атрибутом ссылки.
Сделал так:
Создал карту
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru,
styles: style
});
Создал Маркеры
var markersBounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var markerPosition = new google.maps.LatLng(markers[i].lat, markers[i].lon);
// Добавляем координаты маркера в область
markersBounds.extend(markerPosition);
// Создаём маркер
var marker = new google.maps.Marker({
position: {lat: markers[i].lat, lng: markers[i].lon},
map: map,
title: markers[i].title,
icon: '<?=$this->GetFolder()?>/img/marker-icon.png',
id: markers[i].id,
phone: markers[i].phone,
address: markers[i].address,
schedule: markers[i].schedule,
description: markers[i].description,
email: markers[i].email
});
marker.addListener('click', function() {
console.log(this);
map.setCenter(this.getPosition());
//Всплывашка для клика по Маркеру
var contentString = '<b>' + this.title +'</b>' +
'<br>' + this.description +
//'<br>' + 'Адрес: ' + this.address +
'<br>' + 'Телефон: ' + this.phone +
'<br>' + 'Режим работы: ' + this.schedule;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, this);
});
}
// Центрируем и масштабируем карту
map.setCenter(markersBounds.getCenter(), map.fitBounds(markersBounds));
Пишу нечто, что по моему мнению будет работать, как описано в Задаче:
$('.store-title').click(function(){
var activeStore = $(this).data('store-id');
$.each( markers, function( key, marker ) {
if (marker.id == activeStore) {
console.log(marker);
console.log(map);
//Всплывашка
var contentString = '<b>' + marker.title +'</b>' +
'<br>' + marker.description +
//'<br>' + 'Адрес: ' + this.address +
'<br>' + 'Телефон: ' + marker.phone +
'<br>' + 'Режим работы: ' + marker.schedule;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, marker);
// Центрируем и масштабируем карту
//map.setCenter(markersBounds.getCenter(), map.fitBounds(markersBounds));
}
});
});
Возникает ошибка (см. тему топика).
Если заменить в коде infowindow.open(map, marker); на infowindow.open(map);, то ошибки нет, правда информационное окно всплывает не там, где надо, не рядом с маркером.
В чем причина?
