Javascript 如何使用google autocomplete和google traffic layer map api

我正在尝试使用谷歌自动完成地点和交通层地图。 我正在使用api键包括libraries=places和callback=initMap，但自动完成不起作用。如果我删除callback=initMap，那么autocomplete正在工作，但是callback=initMap autocomplete不工作，只显示流量层映射。先谢谢你

<style>
#map {
    height: 500px;
}
</style>


<form action="" method="post">
    <input type="text" name="location" onFocus="initialize()" id="autocomplete">
    <input type="submit" name="submit" >
</form>


<div id="map"></div><!--Traffic Map-->

<?php
$lat = '';
$long = '';
if(isset($_POST['submit']))
{
    $address = urlencode($_POST['location']);
    $url = "http://maps.googleapis.com/maps/api/geocode/json?address=$address";
    $geocode = file_get_contents($url);
    $output = json_decode($geocode);
    if ($output->status == "OK") 
    {
        $lat = $output->results[0]->geometry->location->lat;
        $long = $output->results[0]->geometry->location->lng;
    }
    else{
        echo $output->status;
    }
}
?>


<script><!--AutoComplete-->
    var autocomplete;
    function initialize() {
      autocomplete = new google.maps.places.Autocomplete(
         (document.getElementById('autocomplete')),
          { types: ['geocode'] });
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
      });
    }
</script>


<script><!--TrafficLayer-->
function initMap() 
{
 var mapOptions = {
    center: new google.maps.LatLng(<?php echo $lat;  ?>, <?php echo $long; ?>),
    zoom: 12,
    scrollwheel: true,
    draggable: true,
    panControl: true,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    overviewMapControl: true,
    rotateControl: true,
  };

var map = new google.maps.Map(document.getElementById('map'),mapOptions);

var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);

var marker = new google.maps.Marker({
        position:{lat: <?php echo $lat;  ?>, lng: <?php echo $long; ?>},
        map:map,
        animation: google.maps.Animation.DROP,
    }); 
}
</script>

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<!--<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initMap"></script>

#地图{
高度：500px；
}
var自动完成；
函数初始化（）{
autocomplete=new google.maps.places.autocomplete(
（document.getElementById（'autocomplete'）），
{类型：['geocode']}）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
});
}
函数initMap（）
{
变量映射选项={
中心：新google.maps.LatLng（，），
缩放：12，
滚轮：对，
真的，
泛控制：对，
动物控制：对，
mapTypeControl:true，
scaleControl：对，
街景控制：对，
overviewMapControl:true，
旋转控制：对，
};
var map=new google.maps.map（document.getElementById（'map'），mapOptions）；
var trafficLayer=new google.maps.trafficLayer（）；
trafficLayer.setMap（地图）；
var marker=new google.maps.marker({
位置：{lat:，lng:}，
地图：地图，
动画：google.maps.animation.DROP，
}); 
}

构建映射后，是否可以尝试将代码（出于自动完成目的）放入initMap（）中

有点像这样：

var autocomplete;
autocomplete = new google.maps.places.Autocomplete(
     (document.getElementById('autocomplete')),
      { types: ['geocode'] });
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
  });

申报后

var marker = new google.maps.Marker({
    position:{lat: <?php echo $lat;  ?>, lng: <?php echo $long; ?>},
    map:map,
    animation: google.maps.Animation.DROP,
}); 

var marker=new google.maps.marker({
位置：{lat:，lng:}，
地图：地图，
动画：google.maps.animation.DROP，
}); 

尝试过，但仍然不起作用。您可以添加有关您得到的错误的信息，以及您在此处尝试执行的操作：google.maps.event.addListener（自动完成，'place_changed'，function（）{}）？我想做的是，当我在表单输入框中输入位置名称时，我会得到地址的建议。然后在选择地址并提交带有流量层的表单地图后，生成该提交位置的地址。当我仅包含库=带有api键的位置时(