Google static maps api need to show multiple characters

Below I have two functions which is generating google map using static map API..

now in that marker I want to show multiple characters.

right now it's showing only one character in marker..

so can any one help me to give me idea how to do that.

I tried as per their API suggestion to show only one character but I want like 97200, USA instead of only one label..

private async generateOptimizedGoogleMapsUrlonelabel(
locations: Array<{ latitude: number; longitude: number; locationStr?: string }>,
centralLocation: { latitude: number; longitude: number }
): Promise<string> {
const API_KEY = 'key';
const baseUrl = 'https://maps.googleapis.com/maps/api/staticmap';

const center = `${centralLocation.latitude},${centralLocation.longitude}`;
const size = '600x600';
const zoom = this.calculateOptimalZoom(locations);

// For Static Maps API, labels must be single alphanumeric characters
const labelChars = '123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';

const markers = locations
.map((location, index) => {
const lat = location.latitude;
const lng = location.longitude;

if (location.locationStr && location.locationStr.trim() !== '' && index < labelChars.length) {
const label = labelChars[index];
return `color:red%7Clabel:${label}%7C${lat},${lng}`;
} else {
return `color:red%7C${lat},${lng}`;
}
})
.join('&markers=');

const mapType = 'roadmap';
const style =
'&style=featureoi|visibilityff&style=feature:transit|visibilityff';
const format = '&format=png&scale=2';

const mapUrl = `${baseUrl}?center=${encodeURIComponent(
center
)}&zoom=${zoom}&size=${size}&maptype=${mapType}&markers=${markers}${style}${format}&key=${API_KEY}`;

if (mapUrl.length > 8000) {
return this.generateSimplifiedMapUrl(locations, centralLocation, API_KEY);
}

return mapUrl;
}

private generateSimplifiedMapUrlonelabel(
locations: Array<{ latitude: number; longitude: number; locationStr?: string }>,
centralLocation: { latitude: number; longitude: number },
apiKey: string
): string {
const baseUrl = 'https://maps.googleapis.com/maps/api/staticmap';
const center = `${centralLocation.latitude},${centralLocation.longitude}`;
const size = '600x600';
const zoom = this.calculateOptimalZoom(locations);

//(1-9, A-Z) and use single character labels
const limitedLocations = locations.slice(0, 35);
const labelChars = '123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';

const markers = limitedLocations
.map((location, index) => {
const lat = location.latitude;
const lng = location.longitude;

if (location.locationStr && location.locationStr.trim() !== '') {
const label = labelChars[index];
return `color:red%7Clabel:${label}%7C${lat},${lng}`;
} else {
return `color:red%7C${lat},${lng}`;
}
})
.join('&markers=');

const mapType = 'roadmap';
const style =
'&style=featureoi|visibilityff&style=feature:transit|visibilityff';
const format = '&format=png&scale=2';

return `${baseUrl}?center=${encodeURIComponent(
center
)}&zoom=${zoom}&size=${size}&maptype=${mapType}&markers=${markers}${style}${format}&key=${apiKey}`;
}

Continue reading...