How to Add marker in Google Map in Ionic 4

In this blog, we will discuss How to Add markers in Google Map in Ionic 4 App Development. Please read the blog.

Everything works great. However, this example prompts the user to add a marker to the google map by clicking on a button. I want the marker to be automatically added after the map loads in the view.

Here is the following code to implement add marker in Google Map in Ionic 4

Just add two functions in your ts file.


 addMarker(){
    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: this.map.getCenter()
    });
    let content = "<h4>Information!</h4>";
    this.addInfoWindow(marker, content);
  }
  addInfoWindow(marker, content){
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.open(this.map, marker);
    });
  }


ngAfterContentInit()  {
    this.map = new google.maps.Map(
      this.mapElement.nativeElement,{
        center: {lat: 22.5726, lng: 88.3639},
        zoom:8
      });
      this.addMarker();//here you call the method.
  }

Conclusion:

Finally, I add the marker in your given position just add these two methods in your ts file, and it's a call from after map creation. You can apply the code in the Ionic mobile app development. Please share your review in the comment section.