M
M
MaxKondratenko2014-08-26 09:53:51
Google Maps
MaxKondratenko, 2014-08-26 09:53:51

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

2 answer(s)
M
MaxKondratenko, 2014-08-26
@MaxKondratenko

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]);
        });
..............

I delete markers when necessary very simply by the same id by which they were created
.......
markers[id].setMap(null);
.......

E
Evgeny Petrov, 2014-08-26
@Petroveg

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 question

Ask a Question

731 491 924 answers to any question