Ad

Is There A Way To Add Custom Alt Text To Custom Marker In Google Maps To Improve SEO Rating?

- 1 answer

I'm facing a problem with google maps API as one of the customers of my company asked for the alt attribute on the marker image.

I cannot find anything in official Google documentation (i.e.: https://developers.google.com/maps/documentation/javascript/custom-markers) and cannot even find anything elsewhere about the alt text for google maps marker. Personally, I don't even know if it has some effect on the SEO (as stated by a third-party company that the customer referred to, as they ran some SEO checks on their website).

I tried to use the examples from google and tried to add a hypothetical alt instruction, but, of course, it's not being picked up.

<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // Initialize and add the map
        function initMap() {
            // The location of Uluru
            var uluru = { lat: -25.344, lng: 131.036 };
            // The map, centered at Uluru
            var map = new google.maps.Map(
                document.getElementById('map'), { zoom: 4, center: uluru });
            // The marker, positioned at Uluru
            var marker = new google.maps.Marker({
                position: uluru,
                map: map,
                title: 'Uluru',
                alt: 'my alternate text goes here'
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=***********************&callback=initMap" async defer></script>
</body>
</html>

The after-rendering result is similar to the following:

<img alt="" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png" draggable="false" usemap="#gmimap0" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; opacity: 1;">

Is there any way I can get something like:

<img alt="my alternate text goes here" src="https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png" draggable="false" usemap="#gmimap0" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; opacity: 1;">

UPDATE:

partial rendered code screenshot

Ad

Answer

1) I don't think it will have any impact on SEO: the markers are dynamically rendered and afaik Google only parses static HTML and some content rendered by JS but I haven't seen it run Maps API calls, I'd have noticed it in my API traffic). It would be probably much more helpful to generate a page summary in JSON-LD: https://json-ld.org/

2) If you MUST add an alt tag (I don't see why) or you want to display a hover tooltip next to the marker, you have to look at extending the google.maps.OverlayView() to create your own custom marker: this object has a draw prototype method that will allow you put anything on the map, any way you want it: an <img alt=...>, a <div> etc.

https://developers.google.com/maps/documentation/javascript/reference/overlay-viewhttps://developers.google.com/maps/documentation/javascript/examples/overlay-simple

3) Since you rely on Google correctly parsing JS output: why not try to add the alt tag post-factum (after map load) like (jQuery) $('img[alt=""]').attr('alt','Now I fixed it') ;)

Ad
source: stackoverflow.com
Ad