Google Maps API - Show multiple marker tool tips - google-maps

Question

I have a map with markers on it, but I want to be able to show multiple tool tips.
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

Answer 1

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

Answer 2

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: