CODEWITHSUNDEEP
angulargoogle-mapscapacitor
Christophe Chenel
Christophe Chenel

Reputation: 1921

How to open an InfoWindow using capacitor-google-map plugin?

I am using this : https://capacitorjs.com/docs/v4/apis/google-maps#setonmarkerclicklistener

I ran :

npm install @capacitor/google-maps
npx cap sync

Then created the map :

import { GoogleMap } from '@capacitor/google-maps';

@Component({
  template: `
    <capacitor-google-map #map></capacitor-google-map>
    <button (click)="createMap()">Create Map</button>
  `,
  styles: [
    `
      capacitor-google-map {
        display: inline-block;
        width: 275px;
        height: 400px;
      }
    `,
  ],
})
export class MyMap {
  @ViewChild('map')
  mapRef: ElementRef<HTMLElement>;
  newMap: GoogleMap;

  async createMap() {
    this.newMap = await GoogleMap.create({
      id: 'my-cool-map',
      element: this.mapRef.nativeElement,
      apiKey: environment.apiKey,
      config: {
        center: {
          lat: 33.6,
          lng: -117.9,
        },
        zoom: 8,
      },
    });
  }
}

Once I get a click on a marker i would like to display an infowindow.

I am using the plugin from capacitor and not the google-map JS SDK.

How would you open an info-window using this library ?

I would like to show an info infow with the val callbackData which is the data of the marker.

this.map.setOnMarkerClickListener((val) => {
  console.log(val);
});

Upvotes: 0

Views: 392

Answers (1)

Yrll
Yrll

Reputation: 2561

The Marker Interface has a title and snippet props that accepts strings to be used as content for the Info Window of the Marker when clicked.

  • title - a short description of the overlay.
  • snippet - shown beneath the title in the info window when selected.

Both of them are included within MarkerCallbackData ref: https://capacitorjs.com/docs/apis/google-maps#markercallbackdata

Then you can use the marker click listener to access the markerId and use that ID to access the marker data. ref: https://capacitorjs.com/docs/apis/google-maps#markerclickcallbackdata

setOnMarkerClickListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>

Here's a good article you can check out that might help further: https://medium.com/@avilaatencioa/ionic-capacitor-google-maps-80ae06183def

Upvotes: 0

Related Questions