Answer the question
In order to leave comments, you need to log in
How to add and remove google maps api v3 markers?
I rummaged through the Internet, most likely I'm looking badly and can't find what I need.
In general, I will describe the problem.
There is a database, from which I load objects, each of them has coordinates, plus a description, plus a photo.
Now I need to draw markers with info windows according to the obtained coordinates.
plus minus it is clear how to do it, it is described here
But after I start applying filters and some objects disappear from the dom. And apparently before removing objects from the house I need to remove some markers.
I found options where you can completely remove all markers and draw on a new one, but I don’t like this option, in extreme cases, of course, you can do this, but it seems stupid to me to delete everything and draw on a new one. Can someone tell me if someone has already done this, or a link to an article where you can read more.
Thanks in advance.
Answer the question
In order to leave comments, you need to log in
in general, I went the other way ... I
create an array of markers by id which I get
...........
//координаты маркера
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]);
});
..............
.......
markers[id].setMap(null);
.......
Something like this
Example 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);
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question