Как добавлять и удалять маркеры google maps api v3?

Question

[MaxKondratenko]

Рылся на просторах интернета, скорее всего я плохо ищу и не могу найти , то что мне нужно.
В общем то опишу проблему .
Есть бд, из неё я подгружаю объекты, у каждого из них есть координаты, плюс описание, плюс фото.
Теперь мне по полученным координатам нарисовать маркеры с инфоокнами.
плюс минус понятно как это сделать , описано это здесь
Но после я начинаю применять фильтры и некоторые объекты исчезают из dom. И видимо перед удалением объектов из дом мне нужно удалить некоторые маркеры.
Находил варианты где можно удалить полностью все маркеры и отрисовать по новой, но такой вариант мне не нравится, на крайний случай конечно можно будет так сделать, но мне кажется это глупым, удалять всё и рисовать по новой. Подскажите может кто уже делал такое, или ссылку на статейку где можно почитать подробнее.
Заранее спасибо.

Answer 1

[MaxKondratenko]

в общем пошел другим путём ...
создаю массив маркеров по id который получаю

...........
//координаты маркера
var lat = ...;
var lng = ...;
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
	
//присваиваем иконке изображение (в моём случае разные) поэтому нужна переменная		
var myicon = ...;

//создаём балун для каждого маркера с различным контентом
var contentString = '<div id="balloon">....</div>';
var infowindow = new google.maps.InfoWindow({
				content: contentString
				});

//создаём сам маркер				
markers[id] = new google.maps.Marker({
				icon: myicon,
				position: point,
				map: MYMAP,
				title: ...
			});
			
//добавляем событие при клике по маркеру 			
google.maps.event.addListener(markers[id], 'click', function() {
				infowindow.open(MYMAP,markers[id]);
				});
..............

удаляю маркеры когда это нужно очень просто по тому же id по которому они были созданы

.......
markers[id].setMap(null);
.......

Answer 2

[Евгений Петров]

Примерно так

Пример codepen.io/cleric/pen/ioGcF

// Когда-то на заре вселенной была создана Она...
var myMap = new google.maps.Map(..., {...});
...
//И на 8-й день покрылась Она блоками и маркерами
for (...) {
	var block = $('<div>')
		.append(...)
		.data('marker', new google.maps.Marker({
			icon: ...,
			position: ...,
			title: ...
		}))
		.on('click', function () {
			// Удаляем и блок, и маркер
			var $item = $(this);

			$item.data('marker').setMap(null);
			$item.remove();
		})
		appendTo(...);

	block.data('marker').setMap(myMap);
}

Comments

[MaxKondratenko]

Спасибо!
Добавлять добавляет , а вот удалять не хочет...
вот такое выдаёт :
TypeError: undefined is not an object (evaluating '$item.data('marker').setMap')
(anonymous function)main.js:123
dispatchjquery-2.1.1.min.js:3:6410
handlejquery-2.1.1.min.js:3:3185
ma.js:123
и можно как то ещё инфоокно(балун) прикрутить ? чет не догоняю как.

[Евгений Петров]

@MaxKondratenko мотрите на пример и думайте codepen.io/cleric/pen/ioGcF
И почему так всё беспомощно-то?

[MaxKondratenko]

Потому что я только учусь, программировал раньше в школе классе в 11м, с тех пор прошло больше 12ти лет и программированием я не занимался. И изучаю всё это месяца два, самостоятельно...и некоторые моменты даются с трудом.
Спасибо вам за помощь! много дельных советов от вас получил.

[Евгений Петров]

@MaxKondratenko зря вы так — ваш пример вполне себе нормальный. Это я почему-то решил, что вы — один из толпы халявщиков, не желающих думать... Ошибся, уж извините, с кем не бывает:)

[Евгений Петров]

@MaxKondratenko просто вы сохраняете маркеры, а я — элементы, в которых уже есть ссылки на маркеры, в которых есть id, чтобы из хэша взять нужный элемент. Надеюсь, не запутал:)

[MaxKondratenko]

Что зря ?))) я правда вам очень благодарен за помощь ! многие моменты стали яснее, вы уже не первый раз отвечаете на мои вопросы.
Да я понял примерно как у вас сделано. Так гораздо удобнее. Но я немного ещё затупляю в синтаксисе java script. Со временем разберусь ) Я не халявщик, я обращаюсь сюда за помощью, только если несколько часов не могу найти решение проблемы. Еще прикрутил кастомный infobox .
В общем то вот примерно так выглядит функция которая добавляет или показывает маркеры

function getobjectsbyid(id) {
var tmp = $('#objectid_'+id+'').hasClass('object');
if (tmp) {
$('#objectid_'+id+'').removeClass('hide');
$('#objectid_'+id+'').addClass('show');
markers[id].setMap(map2);

}
else {
$.ajax({
type: "POST",
url: "../lib/db.php",
data: {"edit" : true, "id" : id},
cach: false,
success: function(response) {
dataobjects = JSON.parse(response);

var rayon = '';
switch (dataobjects['place_district_id'])
{
case 1: rayon = 'Джомтьен'; break;
case 2: rayon = 'Пратамнак'; break;
case 3: rayon = 'Центр'; break;
case 4: rayon = 'Север'; break;
case 5: rayon = 'Юг'; break;
case 6: rayon = 'Тайские районы'; break;
}

var type = '';
switch (dataobjects['place_type_id'])
{
case 1: type = 'Студия'; break;
case 2: type = 'Квартира'; break;
case 3: type = 'Дом'; break;
case 4: type = 'Вилла'; break;
}

$('#objects').append('РедактироватьУдалить'+dataobjects['place_name']+''+rayon+'Тип: '+type+'Спален: '+dataobjects['bedroom_count']+'Ванных: '+dataobjects['bathroom_count']+''+dataobjects['price']+' бат/месуточняйте стоимость');
//$('#objects').children('.show').show('slow');
///маркеры///

var lat = dataobjects['coord_lat'];
var lng = dataobjects['coord_long'];
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
if (dataobjects['place_type_id'] == 1) myicon = '../img/icon_studio.png';
if (dataobjects['place_type_id'] == 2) myicon = '../img/icon_flat.png';
if (dataobjects['place_type_id'] == 3) myicon = '../img/icon_home.png';
if (dataobjects['place_type_id'] == 4) myicon = '../img/icon_villa.png';

var contentString = ''+dataobjects['place_name']+''+dataobjects%5B'img_gen'%5D+'';

var infobox = new InfoBox({
content: contentString,
disableAutoPan: false,
maxWidth: 160,
pixelOffset: new google.maps.Size(-80, -220),
zIndex: null,
boxStyle: {
background: "url('google-maps-utility-library-v3.googlecode.com/svn/...') no-repeat",
opacity: 1,
width: "160px"
},
closeBoxMargin: "6px 6px 2px 2px",
closeBoxURL: "www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
})

markers[id] = new google.maps.Marker({
icon: myicon,
position: point,
map: map2,
title: dataobjects['place_name']
});

google.maps.event.addListener(markers[id], 'click', function() {
infobox.open(map2, markers[id]);
});
google.maps.event.addListener(map2, 'click', function() {
infobox.close();
});
}
})
}
}

Понимаю что код очень далёк от хотя бы нормального уровня) но это мой первый проект, поэтому не стоит судить строго )

[Евгений Петров]

@MaxKondratenko немного улучшил код, хотя насчёт массивов с названиями — скорее всего, они будут в контексте ещё более высокого уровня, поскольку это — языковые параметры, передающиеся при инициализации.

function getobjectsbyid(id) {
	var $object = $('#objectid_' + id),
		districts = [
			'Джомтьен',
			'Пратамнак',
			'Центр',
			'Север',
			'Юг',
			'Тайские районы'
		],
		types = [
			'Студия',
			'Квартира',
			'Дом',
			'Вилла'
		],
		icons = [
			'../img/icon_studio.png',
			'../img/icon_flat.png',
			'../img/icon_home.png',
			'../img/icon_villa.png'
		];

	if ($object.hasClass('object')) {
		$object.removeClass('hide').addClass('show');
		markers[id].setMap(map2);
	} else {
		$.ajax({
			type: 'POST',
			url: '../lib/db.php',
			dataType: 'json',
			cach: false,
			data: {
				edit: true,
				id: id
			},
			success: function(dataobjects) {
				var infobox = new InfoBox({
						content: dataobjects.place_name + ' ' + dataobjects.img_gen,
						disableAutoPan: false,
						maxWidth: 160,
						pixelOffset: new google.maps.Size(-80, -220),
						zIndex: null,
						boxStyle: {
							background: 'url(google-maps-utility-library-v3.googlecode.com/svn/...) no-repeat',
							opacity: 1,
							width: '160px'
						},
						closeBoxMargin: '6px 6px 2px 2px',
						closeBoxURL: 'www.google.com/intl/en_us/mapfiles/close.gif',
						infoBoxClearance: new google.maps.Size(1, 1)
					});

				markers[id] = new google.maps.Marker({
					icon: icons[dataobjects.place_type_id - 1],
					position: new google.maps.LatLng(
						parseFloat(dataobjects.coord_lat),
						parseFloat(dataobjects.coord_lat)
					),
					map: map2,
					title: dataobjects.place_name
				});

				$('#objects').append(
					dataobjects.place_name + ' ' + districts[dataobjects.place_district_id - 1] + '<br>' +
					'Тип: ' + types[dataobjects.place_type_id - 1] + '<br>' +
					'Спален: ' + dataobjects.bedroom_count + '<br>' +
					'Ванных: ' + dataobjects.bathroom_count + '<br>' +
					dataobjects.price + ' бат/мес<br>уточняйте стоимость'
				);

				google.maps.event.addListener(markers[id], 'click', function() {
					infobox.open(map2, markers[id]);
				});	
				google.maps.event.addListener(map2, 'click', function() {
					infobox.close();
				});
			} 
		}) 
	}
}

При «зря вы так» — это относилось к комментарию, который вы стёрли:) Там была фраза про плохой код, а я сказал, что зря ругаете. Код далеко не самый плохой.

[MaxKondratenko]

Да так пожалуй понятнее с синтаксисом на примере написанном мной) Спасибо ) но решил пока свой код оставить без изменений, так как пора сдать проект ) Но возьму на заметку в следующих либо когда буду этот оптимизировать.

[MaxKondratenko]

Ну и далеко не самый лучший) но я стремлюсь ) целенаправленно избегаю всех готовых плагинов, скриптов, пожалуй кроме jquery и вообще всего уже готового. Иначе мне кажется можно годами делать говно так и не поняв как всё работает.