1

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

1
  • can you jsFiddle your code so we could try things out to help you pls? jsfiddle.net
    – Ruslan
    Aug 3, 2011 at 8:07

2 Answers 2

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

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: enter image description here

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:

Multiple marker and its seperate tooltip

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.