title: Is there a way to add custom alt text to custom marker in google maps to improve SEO rating?
body: <p>I'm facing a problem with google maps API as one of the customers of my company asked for the <code>alt</code> attribute on the marker image.</p>
  <p>I cannot find anything in official Google documentation (i.e.: <a href="https://developers.google.com/maps/documentation/javascript/custom-markers" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/custom-markers</a>) and cannot even find anything elsewhere about the <code>alt</code> 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).</p>
  <p>I tried to use the examples from google and tried to add a hypothetical <code>alt</code> instruction, but, of course, it's not being picked up.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Simple Map&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0&quot;&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;style&gt;
          /* 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;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
      &lt;script&gt;
          // 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'
              });
          }
      &lt;/script&gt;
      &lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=***********************&amp;callback=initMap&quot; async defer&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>The after-rendering result is similar to the following:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;img alt=&quot;&quot; src=&quot;https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png&quot; draggable=&quot;false&quot; usemap=&quot;#gmimap0&quot; style=&quot;position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; opacity: 1;&quot;&gt;
  </code></pre>
  <p>Is there any way I can get something like:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;img alt=&quot;my alternate text goes here&quot; src=&quot;https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png&quot; draggable=&quot;false&quot; usemap=&quot;#gmimap0&quot; style=&quot;position: absolute; left: 0px; top: 0px; width: 27px; height: 43px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; opacity: 1;&quot;&gt;
  </code></pre>
  <hr />
  <p>UPDATE:</p>
  <p><a href="https://i.stack.imgur.com/2pKDB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2pKDB.jpg" alt="partial rendered code screenshot" /></a></p>