How to replace google map marker icon with custom icon in @angular/google-maps module

Issue

component.html:

  <google-map (mapClick)="click($event)" 
  [center]="center" [options]="options" height="500px" width="100%"
    [zoom]="zoom">

    <map-marker (mapClick)="openInfoWindow(marker)" [clickable]="true"
  
    *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label"
      [title]="marker.title" [options]="marker.options">
    </map-marker>
    <map-info-window>Info Window content</map-info-window>
  </google-map>

component.ts:

options: google.maps.MapOptions = {
    zoomControl: true,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    maxZoom: 15,
    minZoom: 8,
  }

I’ve tried adding icon property with url value in options, passing input in map-marker but none worked

https://github.com/angular/components/tree/master/src/google-maps#readme

Solution

As for Angular Google Maps Marker (https://github.com/angular/components/tree/master/src/google-maps/map-marker) documentation, options includes all map-marker object properties that are not "convenience inputs":

…this component offers an options input as well as convenience
inputs for position, title, label, and clickable, and supports all
google.maps.Marker events as outputs.

so any other property that’s not a "convenience input" has to be passed inside a JSON object like so to each marker object on your array:

      const markers =[
      {...},
      {...},
      [{
        position:{
           lat: 24.1  + ((Math.random() - 0.5) * 2) / 100,
           lng: 0.2 + ((Math.random() - 0.5) * 2) / 100,
        },
        visible: true,
        opacity: 0.6,
        label: {
           color: '#333',
           text: 'My Label',
        },
        title: 'My Title',
           options = {
           draggable: false, 
           icon: '../assets/icons/MyMarker.png'
        }
      }],
      {...},
      {...}
    ];

or, at least, it’s what has to be inferred until documentation is completed.

Just past this code on your component and fill the ellipsis objects with needed data or just create an array with this structure from your own data.

Answered By – JoeCool

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.