Ошибка позиционирования с несколькими маркерами HTML на Google Maps

Question

Успешно создав карту Google с пользовательским маркером HTML, используя следующий код, я теперь совершенно озадачен тем, как повторить эту функцию для создания нескольких маркеров.Я пробовал много вариантов этого кода, в том числе делая каждую возможную переменную уникальной, но безрезультатно.Что я здесь не так делаю?

Инициализированная карта:

  // Import Style JSON
  var styleVar = []; $.getJSON('json/map-style.json', function (data) { $.each(data, function (key, value) { styleVar.push(value) }) });

  // Define Position
  var myLatLng = new google.maps.LatLng(41.97, -71.88);

  // Init Map
  var map = new google.maps.Map(document.getElementById('map-container'), {
    center: myLatLng,
    zoom: 9,
    maxZoom: 12,
    minZoom: 9,
    styles: styleVar,
    mapTypeId: google.maps.MapTypeId.READMAP
  });

Создать маркер: (рабочий)

  // Create Marker
  function HTMLMarker1(lat1,lng1){ 
    this.lat1 = lat1; 
    this.lng1 = lng1; 
    this.pos1 = new google.maps.LatLng(lat1,lng1); 
  }

  HTMLMarker1.prototype = new google.maps.OverlayView();
  HTMLMarker1.prototype.onRemove = function(){}

  HTMLMarker1.prototype.onAdd = function(){
      div1 = document.createElement('DIV');
      div1.className = "marker-div";
      div1.innerHTML = "<div class='marker-inner'></div>";
      var panes1 = this.getPanes();
      panes1.overlayImage.appendChild(div1);
  }

  HTMLMarker1.prototype.draw = function(){
      var overlayProjection1 = this.getProjection();
      var position1 = overlayProjection1.fromLatLngToDivPixel(this.pos1);
      var panes1 = this.getPanes();
      panes1.overlayImage.style.left = position1.x + 'px';
      panes1.overlayImage.style.top = position1.y - 30 + 'px';
  }

  markerLat1 = '42.3';
  markerLng1 = '-72.88';
  var htmlMarker1 = new HTMLMarker1(markerLat1, markerLng1);
  htmlMarker1.setMap(map);

Второй маркер: (не работает)

  // Create Marker
  function HTMLMarker2(lat2,lng2){ 
    this.lat2 = lat2; 
    this.lng2 = lng2; 
    this.pos2 = new google.maps.LatLng(lat2,lng2); 
  }

  HTMLMarker2.prototype = new google.maps.OverlayView();
  HTMLMarker2.prototype.onRemove = function(){}

  HTMLMarker2.prototype.onAdd = function(){
      div2 = document.createElement('DIV');
      div2.className = "marker-div";
      div2.innerHTML = "<div class='marker-inner'></div>";
      var panes2 = this.getPanes();
      panes2.overlayImage.appendChild(div2);
  }

  HTMLMarker2.prototype.draw = function(){
      var overlayProjection2 = this.getProjection();
      var position2 = overlayProjection2.fromLatLngToDivPixel(this.pos2);
      var panes2 = this.getPanes();
      panes2.overlayImage.style.left = position2.x + 'px';
      panes2.overlayImage.style.top = position2.y - 30 + 'px';
  }

  markerLat2 = '41.3';
  markerLng2 = '-71.88';
  var htmlMarker2 = new HTMLMarker2(markerLat2, markerLng2);
  htmlMarker2.setMap(map);

В результате этого отображаются оба маркера, но с ошибкой в ​​позиционировании второй маркер «приклеивается» кпервые оба занимают позиционирование последнего ..

Answer 1

После еще нескольких копаний я нашел здесь другой вопрос, который решает эту проблему напрямую -

Карты Google: несколько пользовательских HTML-маркеров

В надежде, что это будетполезно для других Я выкладываю полный код, насколько это возможно в моем примере, но это можно сделать намного тоньше, используя массивы и т. д. (см. здесь для ссылки на это: https://codepen.io/bipin_peter/pen/PNXNpw)

Надеюсь, что этопомогает!

  // Create Marker
  function HTMLMarker(lat,lng){ 
    this.lat = lat; 
    this.lng = lng; 
    this.pos = new google.maps.LatLng(markerLat,markerLng); 
  }

  HTMLMarker.prototype = new google.maps.OverlayView();
  HTMLMarker.prototype.onRemove = function(){}

  HTMLMarker.prototype.onAdd = function(){
      this.div = document.createElement('DIV');
      this.div.className = "marker-div";
      this.div.innerHTML = "<div class='marker-inner'></div>";
      this.div.style.position='absolute';
      var panes = this.getPanes();
      panes.overlayImage.appendChild(this.div);
  }

  HTMLMarker.prototype.draw = function(){
      var overlayProjection = this.getProjection();
      var position = overlayProjection.fromLatLngToDivPixel(this.pos);
      var panes = this.getPanes();
      this.div.style.left = position.x + 'px';
      this.div.style.top = position.y + 'px';
  }
  markerLat = '41.3';
  markerLng = '-73.88';
  var htmlMarker = new HTMLMarker(markerLat, markerLng);
  htmlMarker.setMap(map);


  // Create Marker
  function HTMLMarker1(lat,lng){ 
    this.lat = lat; 
    this.lng = lng; 
    this.pos = new google.maps.LatLng(markerLat1,markerLng1); 
  }

  HTMLMarker1.prototype = new google.maps.OverlayView();
  HTMLMarker1.prototype.onRemove = function(){}

  HTMLMarker1.prototype.onAdd = function(){
      this.div1 = document.createElement('DIV');
      this.div1.className = "marker-div";
      this.div1.innerHTML = "<div class='marker-inner'></div>";
      this.div1.style.position='absolute';
      var panes = this.getPanes();
      panes.overlayImage.appendChild(this.div1);
  }

  HTMLMarker1.prototype.draw = function(){
      var overlayProjection = this.getProjection();
      var position = overlayProjection.fromLatLngToDivPixel(this.pos);
      var panes = this.getPanes();
      this.div1.style.left = position.x + 'px';
      this.div1.style.top = position.y + 'px';
  }
  markerLat1 = '40.3';
  markerLng1 = '-72.88';
  var htmlMarker1 = new HTMLMarker1(markerLat1, markerLng1);
  htmlMarker1.setMap(map);