Google maps custom marker

Hi all,
Is there a way to create custom markers on google map? I would like to add user avatar inside a regular marker or maybe combine an image of marker with avatar. I know it’s possible in Android native, but I’m not being able to find anything related to this subject in Ionic 5. It doesn’t matter if it’s ionic-native or Capacitor, just need a way to do it.
This is an example of Android native (Java) code to accomplish this: Custom image in Google Maps marker for android app?

Any help would be appreciated.


Ionic community is kind of bad. I posted this question 21 days ago and didn’t get any answer. Thanks.

have you searched google? it’s in the documentation.

I did, but didn’t find any solution. If you have one please share the link, thanks :slight_smile:

How are you implementing the Google Maps in your app? Are you using the Native SDKs or the JavaScript SDKs?

Try this YT video

This is the way I add custom markers to my Google Maps:

addMarker(lat: number, lng: number, index: number) {

    let marker = new SVGMarker({
      position: new google.maps.LatLng(lat, lng),
      icon: {
        size: new google.maps.Size(48, 59),
        anchor: new google.maps.Point(24, 59),
        url: 'assets/images/pin-single-orange.svg',
        text: {
          content: '!',
          color: '#fff',
          size: '24px',
          weight: '700',
          position: [25, 24]



I’m using this package to handle the custom SVG markers:

Thanks, but the example is for Java, not Ionic.

Hi, I’m using Native SDK for Google maps with Cordova. I tried Capacitor plugin, but it’s even worse.

Thanks for the example. But I’m using Native SDK and I’m trying to put user avatar inside a marker. Please see an example in my original post.
This is the plugin I’m using: