Google Maps API - Show multiple marker tool tips

I have a map with markers on it, but I want to be able to show multiple tool tips.

开发者_Go百科

It seems when I do:

marker.openInfoWindowHtml(strToolTip);

...each time it is called, it closes the previous tool tip.

Any ideas how I show multiple marker tool tips on the same map?

Thanks

---

Have you tried creating a new infowindow object on marker click event and opening it?

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

---

You can try this:

    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)
  })

Note: The sequence of open() & setMap() must be like above/below code.

Ex:

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

Snapshot are below:

If you are using angular2/4/5 then have a look on the complete code:

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>

And here is the output/Snapshot: