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.
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>Not sure why this would work with previous versions and not anymore but one way you can get around the issue is by passing an HTML element as your glyph and style the element directly.
<!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 = document.createElement('div')
label.innerHTML = position.label
label.style.fontSize = position.fontSize
const background = position.backgroundColor || "#FF0000"; // Default background if not provided
const glyphColor = position.glyphColor || "#FFFFFF"; // Default glyph color if not provided
// 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
});
const marker = new google.maps.marker.AdvancedMarkerElement({
position,
content: pinGlyph.element,
});
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>