Jquery Gmaps方向元素的前置

我正在使用Google Maps JavaScript API，我想在短语“Starting From”前面加上“.adp placemark”类，该类包含在Google输出的方向中：

$('.adp-placemark').prepend('Starting From:');

前置器不工作。但是，如果我查看页面并使用Inspector中的Console工具，然后运行上面的代码，那么它将按照应该的方式进行预编译

我应该把这个代码放在哪里？我还尝试将它放在一个单独的函数中，并放在文档中

函数initMap（）{
var directionsDisplay=新建google.maps.DirectionsRenderer；
var directionsService=新的google.maps.directionsService；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：7，
中心：{lat:41.85，lng:-87.65}
});
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（'right-panel'）；
var control=document.getElementById（'floating-panel'）；
control.style.display='block'；
map.controls[google.maps.ControlPosition.TOP\u CENTER].push（控件）；
var onChangeHandler=函数（）{
计算显示路线（方向服务、方向显示）；
};
document.getElementById（'start'）.addEventListener（'change'，onChangeHandler）；
document.getElementById（'end'）.addEventListener（'change'，onChangeHandler）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
var start=document.getElementById（'start'）.value；
var end=document.getElementById（'end'）.value；
方向服务.路线({
来源：start，
目的地:完，
travelMode:“驾驶”
}，功能（响应、状态）{
如果（状态=='OK'）{
方向显示。设置方向（响应）；
$（'.adp placemark'）.prepend（'起始日期：'）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}

html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
#浮动面板{
位置：绝对位置；
顶部：10px；
左：25%；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}
#右面板{
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}
#右面板选择，#右面板输入{
字体大小：15px；
}
#右面板选择{
宽度：100%；
}
#右面板i{
字体大小：12px；
}
#右面板{
身高：100%；
浮动：对；
宽度：390px；
溢出：自动；
}
#地图{
右边距：400px；
}
#浮动面板{
背景：#fff；
填充物：5px；
字体大小：14px；
字体系列：Arial；
边框：1px实心#ccc；
盒影：0 2px2pRGBA（33,33,33,0.4）；
显示：无；
}
@媒体印刷品{
#地图{
高度：500px；
保证金：0；
}
#右面板{
浮动：无；
宽度：自动；
}
}

开始：
芝加哥
圣路易斯
密苏里州乔普林
俄克拉荷马城
阿马里洛
盖洛普
亚利桑那州弗拉格斯塔夫
维诺娜
金门
巴斯托
圣贝纳迪诺
洛杉矶


结束：
芝加哥
圣路易斯
密苏里州乔普林
俄克拉荷马城
阿马里洛
盖洛普
亚利桑那州弗拉格斯塔夫
维诺娜
金门
巴斯托
圣贝纳迪诺
洛杉矶

您需要等待侧面板被呈现出来（Google Maps Javascript API是事件驱动和异步的）。在prepend操作周围添加一个

setTimeout

（证明了这一概念，尽管它很麻烦）：

（您还需要将jQuery添加到您的代码段中，以使其正常工作…） 这会导致浏览器延迟预结束操作，直到侧面板渲染完成

函数initMap（）{
var directionsDisplay=新建google.maps.DirectionsRenderer；
var directionsService=新的google.maps.directionsService；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：7，
中心：{
拉脱维亚：41.85，
液化天然气：-87.65
}
});
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（'right-panel'）；
var control=document.getElementById（'floating-panel'）；
control.style.display='block'；
map.controls[google.maps.ControlPosition.TOP\u CENTER].push（控件）；
var onChangeHandler=函数（）{
计算显示路线（方向服务、方向显示）；
};
document.getElementById（'start'）.addEventListener（'change'，onChangeHandler）；
document.getElementById（'end'）.addEventListener（'change'，onChangeHandler）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
var start=document.getElementById（'start'）.value；
var end=document.getElementById（'end'）.value；
方向服务.路线({
来源：start，
目的地:完，
travelMode:“驾驶”
}，功能（响应、状态）{
如果（状态=='OK'）{
方向显示。设置方向（响应）；
setTimeout（函数（）{
$（'.adp placemark'）.prepend（'起始日期：'）；
}, 500);
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
#浮动面板{
位置：绝对位置；
顶部：10px；
左：25%；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“机器人”，“无衬线”；
线高：30px；
左侧填充：10px；
}
#右面板{
字体系列：“机器人”，“无衬线”；
线高：30px；
左侧填充：10px；
}
#右面板选择，
#右面板输入{
字体大小：15px；
}
#右面板选择{
宽度：100%；
}
#右面板i{
字体大小：12px；
}
#右面板{
身高：100%；
浮动：对；
宽度：390px；
溢出：自动；
}
#地图{
右边距：400px；
}
#浮动面板{
背景：#fff；
填充物：5px；
字体大小：14px；
字体系列：Arial；
边框：1px实心#ccc；
盒影：0 2px2pRGBA（33,33,33,0.4）；
显示：
setTimeout(function() {
  $('.adp-placemark').prepend('Starting From:');
}, 500);

    /* Pseudo-element to add 'Starting from:' to the first element that appears */
    .adp > div:nth-child(2) .adp-placemark::before {
      content: 'Starting from:';
      white-space: nowrap;
    }

    /* Pseudo-element to add 'Going to:' to the second element that appears */
    .adp > div:nth-child(3) .adp-placemark::before {
        content: 'Going to:';
        white-space: nowrap;
    }

.adp-placemark::before {
    content: 'Starting from:';
    white-space: nowrap;
}