изменение URL-адресов по умолчанию для google-карт

Question

Я использую API-интерфейс Google Maps V3 JavaScript API, и в настоящее время я использую форматирование по умолчанию для по умолчанию (поскольку это самый простой способ получения значков карт и значков шагов, включенных в список) , Я устанавливаю текст, отображаемый для каждого «адрес», например:

var loc = 'The Old Ballpark Bar and Lounge'; 
var addr = '1234 Main st. Chicago, IL.'; 
... 
route.legs[0].start_address = loc + ' - ' + addr; 

Я хотел бы, чтобы улучшить читаемость этого start_address 2 способами:

1. Я хотел бы поставьте часть addr на отдельной строке.
2. Я хотел бы подчеркнуть loc части жирного

Поскольку текст this start_address помещают в td (class="adp-text") в пределах таблицы (class="adp-placemark"); Я думал, что ставить <br/> между loc и addr заставит меня использовать новую линию; но это не работает, api переводит это в <br/>. Аналогичным образом, пытаясь положить <b> до loc, он переводится в & lt;b& gt;.

Я попытался избежать кода разметки с помощью котировок и обратных косых черт и т. Д .; но не может найти способ делать то, что я хочу. Есть ли способ вставить такую ​​отметку, чтобы получить ее от переводчиков кода Google? Существуют ли теги CSS более низкого уровня, которые могут быть использованы для этого?

Answer 1

Вы должны изменить элементы после того, как они были вставлены в DOM.

1. присвоить нужную разметку:

   route.legs[0].start_address = '<div style="font-weight:bold">'+ loc + '</div>' + addr; 
   

2. скрыть панель (чтобы избежать нежелательных эффектов)

   //directionsDisplay is the google.maps.DirectionsRenderer-instance 
   directionsDisplay.getPanel().style.visibility='hidden'; 
   

3. установить направление:

   directionsDisplay.setDirections(response); 
   

4. ждать момента, пока вы не измените элементы:

   setTimeout(function(){ 
   //fetch the elements 
   var nodes=directionsDisplay.getPanel().querySelectorAll('td.adp-text'); 
   for(var n=0;n<nodes.length;++n){ 
       //assign the text-content of the element to the innerHTML-property 
       nodes[n].innerHTML=nodes[n].firstChild.data; 
   } 
   //show the panel 
   directionsDisplay.getPanel().style.visibility='visible'; 
   },100);