CODEWITHSUNDEEP
htmlcssangulargoogle-maps
M. Urazov
M. Urazov

Reputation: 155

How to display custom DOM element in particular position of agm-map

I'm going to display custom dom into agm-map in my angular6 project. When I use agm-marker I can only display specific icon and label. What I want to display looks like:

.user-location i {
  opacity: 0.7;
}
.user-location img {
  border-radious: 100%;
}
...
<a class="user-location">
  <i class="pin-icon"></i>
  <figure>
    <img src="../../assets/layouts/layout/img/new-icon.png" alt="" />
  </figure>
  ...
</a>

Upvotes: 0

Views: 833

Answers (1)

Patricio Vargas
Patricio Vargas

Reputation: 5522

I have changed the marker the following way:

<agm-map [latitude]="lat" [longitude]="lng"  [styles]="mapStyle === 'dark' ? styleDark : styleLight">
            <div  *ngFor="let marker of markers;">
                <agm-marker [iconUrl]="'/assets/markers/'+marker.type+'.png'" [latitude]="marker.lat" [longitude]="marker.long" (markerClick)='openMarkerInfo(markerInfo, marker)'>           
                </agm-marker>
            </div>
        </agm-map>

If you ever want to customize the map too you can do the following:

[styles]="mapStyle === 'dark' ? styleDark : styleLight"

in your ts file you will have all the properties. To learn more about how to customize a map with icons and colors in the map take a look to this repo: https://github.com/devpato/SOSmap

Upvotes: 1

Related Questions