Google maps custom marker

Ionic Framework Ionic Angular
1

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.

Thanks,
Slobodan

2

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

3

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

4

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

5

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

6

Try this YT video

7

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),
      map: this.map,
      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]
        }
      }
    });

    this.markers.push(marker);
    this.bounds.extend(marker.getPosition());

    this.map.fitBounds(this.bounds);

  }

I’m using this package to handle the custom SVG markers: https://www.npmjs.com/package/@defvayne23/svg-marker

8

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

9

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

10

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: