Google Maps API - Показать несколько подсказок для маркеров

Question

У меня есть карта с маркерами, но я хочу показать несколько подсказок.

Кажется, когда я делаю:

marker.openInfoWindowHtml(strToolTip);

... каждый раз, когда он вызывается, он закрывает предыдущую подсказку.

Есть идеи, как показать несколько подсказок для маркеров на одной карте?

Спасибо

Answer 1

Вы можете попробовать это:

    var markers = [
      { lat: 28.7051, lng: 77.1125 },
      { lat: 28.7081, lng: 77.1075 },
      { lat: 28.7021, lng: 77.1315 }
    ]
    var index=0;
    markers.forEach(function (marker) {

           var self=this;
           (function (marker) {
             let mark = new google.maps.Marker({ position: new google.maps.LatLng(marker.lat, marker.lng) });


             var infowindow = new google.maps.InfoWindow({ content: index });
             infowindow.open(self.map, marker);
             mark.setMap(self.map);
             index++;
        })(marker)
  })

Примечание: Последовательность из open() & setMap() должна быть такой же, как выше / ниже кода.

Пример:

             infowindow.open(self.map, marker);
             mark.setMap(self.map);

Снимок ниже:

Если вы используете angular2 / 4/5 , взгляните на полный код:

map.component.ts:

import { Component, ViewChild } from '@angular/core';
import { } from '@types/googlemaps'; // You need to install @types/googlemaps, To know how hit this URL- https://medium.com/@svsh227/integrate-google-api-map-in-your-angular-2-4-5-app-472bf08fdac

@Component({
  selector: 'map-component',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent {
  @ViewChild('map') gmapElement: any;
  map: google.maps.Map;
  ngOnInit() {
    var markers = [
      { lat: 28.4685, lng: 77.0056, toolTip: 'Here too' },
      { lat: 28.4795, lng: 77.0276, toolTip: 'Here too' },
      { lat: 28.4605, lng: 77.0546, toolTip: 'Here too' }
    ]

    // For center
    var mapProp = {
      center: new google.maps.LatLng(28.4595, 77.0266),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.HYBRID // also use ROADMAP,SATELLITE or TERRAIN
    };

    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
    var marker = new google.maps.Marker({ position: mapProp.center });
    marker.setMap(this.map);
    var infowindow = new google.maps.InfoWindow({ content: "Hey !! Here we are" });
    infowindow.open(this.map, marker);
    this.setMultipleMarker(markers, this);
  }

  setMultipleMarker(markers, self) {
    markers.forEach(function (marker) {
      (function (marker) {
        let mark = new google.maps.Marker({ position: new google.maps.LatLng(marker.lat, marker.lng) });
        let infowindow = new google.maps.InfoWindow({ content: marker.toolTip });
        infowindow.open(self.map, mark);
        mark.setMap(self.map);
      })(marker)
    })
  }
}

map.component.html:

<div>
  <br />
  <h1>
    <span class="heading-text">Here We Are</span>
  </h1>
  <div class="row" class="card-details rcorners3 card-height">
    <div class="card" class="subAbout tech-stack">
      <div class="card-header card-header-us">
        <div id="map" #map></div>
      </div>
    </div>
  </div>
</div>

А вот и вывод / Снимок:

Answer 2

Вы пытались создать новый объект информационного окна на событии щелчка маркера и открыть его?

var infowindow = new google.maps.InfoWindow({ content: 'Hello world' });
infowindow.open(map, marker);