javascriptgoogle-mapsgoogle-maps-api-3google-maps-advanced-marker-element

How do I change the font size of text in a marker in the new 3.58 version of google maps?


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>


Solution

  • 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>