Was using Google maps as usual when one day the font size of text in the markers seemed to have increased. Looked into it and found out it was due to the recent update to 3.58. I could go back and use 3.57 temporarily but would like to know if there is anyway to customize it in the new update.
This is what I have tried so far
Tried the following code but the size remains the same
<!doctype html>
<html>
<head>
<title>Simple Map</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let map;
async function initMap() {
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
// Initialize the map
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 1.366546901577395, lng: 103.8065581439425 },
mapId: "DEMO_MAP_ID",
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
// Add markers to the map
const markers = locations.map((position) => {
const label = position.label;
const background = position.backgroundColor || "#FF0000"; // Default background if not provided
const glyphColor = position.glyphColor || "#FFFFFF"; // Default glyph color if not provided
const fontSize = position.fontSize || "16px"; // Custom font size for the marker text
// Create a pin with custom styles
const pinGlyph = new google.maps.marker.PinElement({
glyph: label,
glyphColor: glyphColor, // Text color
scale: 1.5,
background: background, // Background color
});
// Create an AdvancedMarkerElement for the pin
const marker = new google.maps.marker.AdvancedMarkerElement({
position,
content: pinGlyph.element,
});
// Apply custom font size directly to the pin glyph's element
const markerElement = pinGlyph.element;
markerElement.style.fontSize = fontSize; // Change the font size dynamically
// Add event listener for info window on marker click
marker.addListener("click", () => {
infoWindow.setContent(
position.code +
" - " +
position.road +
" " +
position.stop +
"<br>" +
position.lat +
", " +
position.lng
);
infoWindow.open(map, marker);
});
return marker;
});
// Add a marker clusterer to manage the markers
new markerClusterer.MarkerClusterer({ markers, map });
}
// Location data with an optional `fontSize` field for custom font sizes
const locations = [
{
lat: 1.39465386086721,
lng: 103.900462389006,
code: "67259",
road: "Compassvale St",
stop: "B02",
label: "Day A.100",
backgroundColor: "#32a852",
fontSize: "12px",
},
{
lat: 1.38949805550873,
lng: 103.905189999894,
code: "67121",
road: "Sengkang East Way",
stop: "B03",
label: " DayA. -2000 ",
backgroundColor: "#000000",
fontSize: "18px",
},
{
lat: 1.39101786005668,
lng: 103.897780179965,
code: "67181",
road: "Compassvale Rd",
stop: "B06",
label: "A.3",
fontSize: "14px",
},
{
lat: 1.38151407829697,
lng: 103.897492379194,
code: "65019",
road: "Punggol Rd",
stop: "B02",
label: "A.4",
fontSize: "10px",
},
{
lat: 1.38533638989648,
lng: 103.890742156576,
code: "67469",
road: "Sengkang East Rd",
stop: "B01A",
label: "A.5",
fontSize: "14px",
}
// Add other markers here...
];
// Initialize the map
initMap();
</script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
</body>
</html>
New contributor
jx work is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.