Контролировать, какой текст отображается при наведении

Question

Я сделал карты Google с 3 красными точками.Когда человек наводит курсор на точку, появляется HTML-код, который выглядит не очень хорошо.Пример из одного из выводов:

Lorem Ipsum 3<br>. Adress 3 <br>. <a href=“####” target=“_blank”>Vis vej</a>

Демитоз может быть здесь

Возможно ли установить какой-то alt тег в javascript, так что я могу контролировать то, что отображается, когда человек наводит курсор над точками?

function initMap() {
      var center = {lat: 51.487655, lng: -0.088128};
      var locations = [

        ['Lorem Ipsum 1<br>\
        Adress 1<br>\
        <a href="####" target="_blank">Vis vej</a>',   52.192877, -0.893615],

        ['Lorem Ipsum 2<br>\
        Adress 2 <br>\
        <a href="#####" target="_blank">Vis vej</a>',   51.627608, -0.501912],

        ['Lorem Ipsum 3<br>\
        Adress 3 <br>\
        <a href="####" target="_blank">Vis vej</a>',   51.483280, -0.071244],

      ];
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: center
      });
    var infowindow =  new google.maps.InfoWindow({});
    var marker, count;
    for (count = 0; count < locations.length; count++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[count][1], locations[count][2]),
          map: map,
          title: locations[count][0]
        });
    google.maps.event.addListener(marker, 'click', (function (marker, count) {
          return function () {
            infowindow.setContent(locations[count][0]);
            infowindow.open(map, marker);
          }
        })(marker, count));
      }
    }

Answer 1

Текст при наведении указывается в свойстве title маркера, которое является только текстом (без HTML).Не помещайте туда HTML-теги, так как в вашем коде можно было бы назначить другой элемент массива, который бы содержал только текст:

var locations = [
    ['Lorem Ipsum 1', 
     'Lorem Ipsum 1<br>Adress 1<br><a href="####" target="_blank">Vis vej</a>',
     52.192877, -0.893615],
    ['Lorem Ipsum 2', 
     'Lorem Ipsum 2<br>Adress 2 <br><a href="#####" target="_blank">Vis vej</a>', 
     51.627608, -0.501912],
    ['Lorem Ipsum 3', 
     'Lorem Ipsum 3<br>Adress 3 <br><a href="####" target="_blank">Vis vej</a>', 
     51.483280, -0.071244],
  ];

Затем создайте свои маркеры следующим образом:

for (count = 0; count < locations.length; count++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[count][2], locations[count][3]),
    map: map,
    title: locations[count][0]
  });
  google.maps.event.addListener(marker, 'click', (function(marker, count) {
    return function() {
      infowindow.setContent(locations[count][1]);
      infowindow.open(map, marker);
    }
  })(marker, count));
}

подтверждение концепции скрипта

фрагмент кода:

function initMap() {
  var center = {
    lat: 51.487655,
    lng: -0.088128
  };
  var locations = [
    ['Lorem Ipsum 1', 'Lorem Ipsum 1<br>Adress 1<br><a href="####" target="_blank">Vis vej</a>', 52.192877, -0.893615],
    ['Lorem Ipsum 2', 'Lorem Ipsum 2<br>Adress 2 <br><a href="#####" target="_blank">Vis vej</a>', 51.627608, -0.501912],
    ['Lorem Ipsum 3', 'Lorem Ipsum 3<br>Adress 3 <br><a href="####" target="_blank">Vis vej</a>', 51.483280, -0.071244],
  ];
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: center
  });
  var infowindow = new google.maps.InfoWindow({});
  var marker, count;
  for (count = 0; count < locations.length; count++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][2], locations[count][3]),
      map: map,
      title: locations[count][0]
    });
    google.maps.event.addListener(marker, 'click', (function(marker, count) {
      return function() {
        infowindow.setContent(locations[count][1]);
        infowindow.open(map, marker);
      }
    })(marker, count));
  }
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<div id="map"></div>