如何动态更改自定义谷歌地图标记的HTML？

Question

I have created a custom HTML Map Marker which I can use to add html to a marker. This works perfectly well. I have added the class below.

Every 10 seconds new data comes in and I would like to change the html of the marker such that the data is shown appropriately.

I have tried simply changing the html attribute of the marker like this:

marker.html = `<div id="test" class="progress consumptionProduction">
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>`;

Which does indeed change the value of marker.html but the marker is not updated on the map.

marker = createHTMLMapMarker({
      latlng: new google.maps.LatLng((53.233071+0.00008),(6.535706-0.00006)),
      map: map,
      html: `<div id="test" class="progress consumptionProduction">
                <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
              </div>`
    })    

export const createHTMLMapMarker = ({ OverlayView = 
google.maps.OverlayView,  ...args }) => {
class HTMLMapMarker extends google.maps.OverlayView {
    constructor() {
    super();
    this.latlng = args.latlng;
    this.html = args.html;
    this.setMap(args.map);
    }

    createDiv() {
        this.div = document.createElement('div');
        this.div.style.position = 'absolute';
        if (this.html) {
        this.div.innerHTML = this.html;
        }
        google.maps.event.addDomListener(this.div, 'click', event => {
        google.maps.event.trigger(this, 'click');
        });
    }

    appendDivToOverlay() {
        const panes = this.getPanes();
        panes.overlayImage.appendChild(this.div);
    }

    positionDiv() {
        const point = this.getProjection().fromLatLngToDivPixel(this.latlng);
        if (point) {
        this.div.style.left = `${point.x}px`;
        this.div.style.top = `${point.y}px`;
        }
    }

    draw() {
        if (!this.div) {
        this.createDiv();
        this.appendDivToOverlay();
        }
        this.positionDiv();
    }

    remove() {
        if (this.div) {
        this.div.parentNode.removeChild(this.div);
        this.div = null;
        }
    }

    getPosition() {
        return this.latlng;
    }

    getDraggable() {
        return false;
    }

}

return new HTMLMapMarker();
};

Answer 1

As the marker is an element in the DOM, you can update its contents via .innerHTML = ... :

document.getElementById("test").innerHTML = "This is my new content";

In your case I would add a new method update(text) to your HTMLMapMarker class and call it whenever a marker's contents need to be changed:

class HTMLMapMarker extends google.maps.OverlayView {
    ...

    update(newText) {
        if (this.div) {
            this.div.innerHTML = newText;
        } else {
          console.warn("createDiv() has not been called on this point", this);
        }
    }
    ...
}

Call the update() routine:

marker = createHTMLMapMarker({
      latlng: new google.maps.LatLng((53.233071+0.00008),(6.535706-0.00006)),
      map: map,
      html: `<div id="test" class="progress consumptionProduction">
                <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-success" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
              </div>`
    }) 

marker.update("This should be my new content");

Answer 2

marker.html is just a property of the HTMLMapMarker class that is used to actually create a HTML object in createDiv . Just updating this property doesn't trigger any action, and createDiv was already called before. What you need to do is ie add a updateDiv(html) method such:

    updateDiv(html) {
        this.html=html;
        if(!this.div){
            this.createDiv();
        } else {
            this.div.innerHTML = this.html;
        }
    }

Then call this method to update the marker (with HTML). Alternately, you can use the .div property of the HTMLMapMarker object to manipulate the marker object directly.