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

user_9279682 0
Viewed 7194

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

angular-material angular
2 Answers

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.

user_27930680

A little digging into the node-modules of @angular/google-maps I found out the icons should be set in the options of map marker.

 <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>

for example the marker property should look like

     const markers = [{

        position:{
        lat: 27  + ((Math.random() - 0.5) * 2) / 10,
        lng: 80 + ((Math.random() - 0.5) * 2) / 10,
      },
        visible: false,
        opacity: 0.1,
        label: {
          color: 'black',
          text: 'Marker label ',
        },
        title: 'Marker title ',
        options: {
          animation: google.maps.Animation.DROP,
          icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
        }
      }]
user_92796820
Related