Tips for adjusting the marker color in Angular Google Maps

I need help with changing the color of a single marker on my map. I have a total of 5 markers displayed, but I want to customize the color of just one of them. I am using angular google maps and struggling to figure out how to achieve this.

So far, I have tried using the [iconUrl] parameter to change the marker colors, but it ends up altering all of them instead of just the one I want to modify.

Here is the HTML code snippet:


<agm-map [latitude]="lat" [longitude]="lng" [fitBounds]="true" >
 <agm-marker [iconUrl]="iconUrl" *ngFor="let data of map_dev" [latitude]="data.latitude" [longitude]="data.longitude"
     [agmFitBounds]="true" (markerClick)="markerdata(data)" >
</agm-marker>
</agm-map>
typescriptangular-google-maps

Answer №1

To customize the iconUrl in your map_dev array, you simply need to specify it. For instance, I designated the 2nd marker's iconUrl as ../image.png

map_dev = [
  { lat: -33.883782, lng: 151.133711, alpha: 1 },
  {
    lat: -33.889698,
    lng: 150.816382,
    alpha: 1,
    iconUrl:
      "../image.png"
  }
];

After setting the iconUrl this way, you can easily access it within the <agm-marker> element by using data.iconUrl

<agm-marker
    *ngFor="let data of map_dev"
    [iconUrl]="data.iconUrl"
    [latitude]="data.lat"
    [longitude]="data.lng"
  >

I have also provided a demonstration on codesandbox so you can visualize how it all works together. Remember to insert your own API key when testing.

This explanation should clarify things for you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to adjust the border-radius of a mat-form-field in Angular?

<mat-form-field class="new-inputs" style="border-radius: 10px;"> <mat-label>Ime</mat-label> <input matInput type="text" maxlength="15" id="firstName" fo ...

cssangulartypescriptangular-material

How to retrieve an array stored within a JSON object

I am trying to access a specific array within an object from a JSON file. Here is the snippet of the data I'm dealing with: best-sellers": [ { "title": "Chuteira Nike HyperVenomX Proximo II Society", "price": 499.90, "installmen ...

jsonangulartypescript

What is the reason for this JSON attribute showing up as undefined in the logs?

Recently, I've set up a nodejs lambda function that is triggered by an SQS queue connected to an SNS topic. Here's a snippet of the lambda code: 'use strict'; import { Handler } from 'aws-lambda'; const myLambda: Handler = ...

typescriptaws-lambdaamazon-sns

Utilizing TypeScript's type inference within a higher order function to determine the input of the returned function

I have been working on creating a versatile "pipe" function that takes a series of map functions to transform an input and then output the result of the final map function. Initially, I only implemented a basic version that accepts one map function as a pa ...

typescripttypescript-genericshigher-order-functions

How can I store the status of checked and unchecked checkboxes in an array of objects using Angular 7?

I have a set of checkboxes with a parent-child structure, and their values are generated dynamically in a loop. When I click the submit button, I want to capture the selected or unselected values in the specified format (as shown in the commented output) ...

javascriptangulartypescript

The parameter 'unknown[]' cannot be assigned to the type 'OperatorFunction'

component.ts initialize() method explains The error message says 'Argument of type 'unknown[]' is not assignable to parameter of type 'OperatorFunction<unknown[], unknown>'. Type 'unknown[]' does not match the si ...

angulartypescriptionic-frameworkrxjsangularfire

Transforming API response data into a Typescript object using React mapping

When I make an API call, the response data is structured like this: [ { "code": "AF", "name": "Afghanistan" }, { "code": "AX", "name": "Aland Islands" } ...

reactjstypescriptreact-typescript

Utilizing Vue 3 props validation in conjunction with the power of Typescript

Looking to customize a Link component using Nuxt, Typescript, and the composition-api. The prop target can accept specific values as outlined below. I'm curious if using a custom validator function to check prop types at runtime adds value when compar ...

typescriptvue.jsvuejs3

Webpack focuses solely on serving HTML files, neglecting to deliver the underlying code

Hey there! I'm currently working on a project that involves using React, TypeScript, and Webpack. I ran into some errors previously that prevented the code from compiling, but now that's fixed. However, when I run webpack, it only serves the HTML ...

reactjstypescriptwebpackreact-tsx

Passing a custom data type from a parent component to a child component in React

I'm currently working on developing a unique abstract table component that utilizes the MatTable component. This abstract table will serve as a child element, and my goal is to pass a custom interface (which functions like a type) from the parent to t ...

angulartypescriptgenericsangular-material

Discovering the data type of interface properties in TypeScript

Consider the following interface along with an object that implements it: interface IData { a: TypeA; b: TypeB; c: boolean; d: string; } const myObject: { data: IData } = { data: { a: valueA, b: valueB, c: t ...

typescript

Extending FormControl causes TS2510 error - All base constructors must return the same type

While attempting to subclass Angular's FormControl, I encountered an error message: TS2510 : Base constructors must all have the same return type import { FormControl } from '@angular/forms'; export class Control<T = any> extends Form ...

angulartypescript

TypeScript is still verifying libraries in the node_modules directory despite skipLibCheck option being

I've been encountering an issue with TypeScript and React where TypeScript continues to check libraries in the node_modules folder even though I have "skipLibCheck" set to true in my tsconfig.json file. Below is a snippet of my tsconfig.json file, wh ...

reactjstypescriptgsap

Using Typescript to automatically infer strongly-typed recursive index types

Commencing with an Animal interface and a detailed map of animals residing on my farm: export interface Animal { species: string; edible: boolean; } export interface FarmMap{ [key: string]: Animal; } Everything seems to be running smoothly. Here ...

typescripttypescript-typings

Adding a custom role in Angular TypeScript in Microsoft AppInsights is a straightforward process that can provide valuable

I have an angular project where I am looking to incorporate AppInsight with custom telemetry (role). The project is built in Angular using TypeScript, and I successfully integrated appinsights by following this tutorial. However, when attempting to add cus ...

angulartypescriptappinsights

Combining information from two different sources to create a more comprehensive dataset

Two get requests are returning the following data: [{ id: 1, hId: 2 }, { id: 6, hId: 1 }] The second request returns: [{ id: 1, name: 'Bob' }, { id: 2, name: 'Billy' }, { id: 6, name: 'John' }] The object ...

typescriptrxjs6angular13

The constructor for Observable, as well as static methods such as `of` and `from`, are currently

I encountered a challenge in my angular application while trying to create an observable array using rxjs. Here is the code snippet: import { Injectable } from "@angular/core"; import { Observable } from "rxjs/Rx"; import { User } from "../model/user"; ...

angulartypescriptrxjsobservable

Creating personalized functions in Object.prototype using TypeScript

My current situation involves the following code snippet: Object.prototype.custom = function() { return this } Everything runs smoothly in JavaScript, however when I transfer it to TypeScript, an error surfaces: Property 'custom' does not ex ...

javascripttypescript

React TypeScript - potential absence of object

I've been working on building a dropdown component using typescript, but I've encountered an issue. First, I defined the type and data like this: type DropdownType = { id: number; label: string; }; const data: DropdownType[] = [ { id: 0, l ...

reactjstypescriptundefinedsetstate

Issue with sx prop type error found in the TabPanel component of MUI v5

My first time using MUI with TypeScript has hit a roadblock with the new sx prop. Check out the error displayed by TypeScript in the screenshot linked below: https://i.sstatic.net/JYDTX.png Interestingly, the error only pops up on the TabPanel Component, ...

typescriptmaterial-ui