CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
user2806170
user2806170

Reputation: 13

modifying google-maps default directions title

I'm using the Google maps V3 JavaScript API and I'm currently using the default directions formatting (because this is the easiest way to get the map pins and step icons integrated into the listing). I'm setting the text that is displayed for each 'address' for example:

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

I'd like to enhance the readability of this start_address in 2 ways:

  1. I'd like to put the addr part on a separate line.
  2. I'd like to highlight the loc part in bold

Since the text for this start_address is placed in a td (class="adp-text") within a table (class="adp-placemark"); I thought that putting a <br/> between the loc and addr would get me the newline I wanted; but it doesn't work, the api translates this into <br/>. Similarly, trying to put <b> before the loc part, gets translated into & lt;b& gt;.

I've tried escaping the markup code with quotes and backslashes, etc.; but can't find a way to do what I want. Is there any way to insert such mark up so as to get it past the Google code translators? Are there some lower-level CSS tags that might be used to accomplish this?

Upvotes: 1

Views: 666

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

You must modify the elements after they have been inserted into the DOM.

  1. assign the desired markup: 

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

  2. hide the panel(to avoid undesired effects) 

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

  3. set the direction:

    directionsDisplay.setDirections(response);

  4. wait a moment until you modify the elements:

    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);

Upvotes: 1

Related Questions