Wordpress 谷歌地图使用API 3显示为空白，而自动建议功能不起作用

我正在尝试使用WordPress提供一个方向服务

这里使用的API是API，但地图只显示空白，而且当输入地址时，它没有返回任何结果

我从CodeCanyon购买了一个插件，但它不再受支持

这是我的电话：

wp_enqueue_style('jqmap-style-ui-slide', WP_PLUGIN_URL . '/JQMap_RouteCalc/css/jquery-ui-1.8.17.custom.css');
wp_register_script('jquery-JQMap_RouteCalcgoogleapis', 'https://maps.googleapis.com/maps/api/js?key=MY-KEY-HERE-kQ&libraries=places');
wp_enqueue_script('jquery-JQMap_RouteCalc',WP_PLUGIN_URL .  '/JQMap_RouteCalc/js/jquery-JQMap_RouteCalc.js', array('jquery','jquery-ui-slider','jquery-JQMap_RouteCalcgoogleapis'));

这是下面的JavaScript

(function($){  
//////////////////////// FUNCTION TO GIVE AUTOCOMPLETE TO EACH CALC INPUTS //////////////
function autocomplete_map(container){
  container.find("input").each(function(){
     new google.maps.places.Autocomplete($(this)[0]);
     $(this).attr('placeholder','')   
  });
}

////////////////////////// FUNCTION TO PRIN ROUTE INFO ///////////
function print_route(panel){
 var a = window.open('','','width=300,height=300');
 a.document.open("text/html");
 a.document.write(panel.html());
 a.document.close();
 a.print();
}

////////////////////////// START GOOGLE MAP API /////////////////
  var myOptions = {
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  , geocoder = new google.maps.Geocoder();


function center(imap,iaddress,info_window,zoom){
    var map;
    map = new google.maps.Map(imap, {
      zoom: zoom,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var address = iaddress;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
        if(info_window != ''){
          var infowindow = new google.maps.InfoWindow({
            content: info_window
          });   
          infowindow.open(map,marker);
           google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);              
           });
        }
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
    setTimeout(function(){$('.map_container').find('img').css({'max-width':'none','max-height':'none'});},500);
}    

  function initialize(imap,ipanel,start,end,wp,travel_mode_select,opt_wp,printable_panel,DivContainerDistance) {
    var directionsDisplay = new google.maps.DirectionsRenderer({draggable: true})
      , directionsService = new google.maps.DirectionsService()
      , oldDirections = []
      , currentDirections;    
    map = new google.maps.Map(imap, myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(ipanel); 
    google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
        if (currentDirections) {
          oldDirections.push(currentDirections);
        }
        currentDirections = directionsDisplay.getDirections();  
        computeTotalDistance(directionsDisplay.directions,DivContainerDistance);
    });    
    var waypts = []
    , dest = wp
    , request = {
      origin: start,
      destination: end,
      waypoints:waypts,
      optimizeWaypoints:opt_wp,
      travelMode: google.maps.DirectionsTravelMode[travel_mode_select]
    };    
    for (var i = 0; i < dest.length; i++) {
      if (dest[i].value != "") {
        waypts.push({
            location:dest[i].value,
            stopover:true});
      }
    }  
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        printable_panel.html('')
        var route = response.routes[0];
        for (var i = 0; i < route.legs.length; i++) {
          var routeSegment = i + 1;
          printable_panel.append("<b>Route Segment: " + routeSegment + "</b><br />"
                               +route.legs[i].start_address + " to "+route.legs[i].end_address + "<br />"
                               +route.legs[i].distance.text + "<br /><br />");          
        }        
      }
      if ( status != 'OK' ){ alert(status); return false;}
      setTimeout(function(){$('.map_container').find('img').css({'max-width':'none','max-height':'none'});},500);
    }); 
    setTimeout(function(){$('.map_container').find('img').css({'max-width':'none','max-height':'none'});},500); 
  }


  function computeTotalDistance(result,DivContainerDistance) {
    var total = 0;
    var myroute = result.routes[0];
    for (i = 0; i < myroute.legs.length; i++) {
      total += myroute.legs[i].distance.value;
    }
    total = total / 1000.
    $(DivContainerDistance).html('Total Distance: '+total + " km")
  } 
////////////////////////// END GOOGLE MAP API /////////////////

（函数（$）{
////////////////////////函数为每个计算输入提供自动完成功能//////////////
函数自动完成映射（容器）{
container.find（“输入”）.each（函数（）{
新的google.maps.places.Autocomplete（$（this）[0]）；
$（this.attr（'占位符'，''）
});
}
//////////////////////////用于获取主要路线信息的函数///////////
功能打印路径（面板）{
变量a=窗口打开（''，''宽度=300，高度=300'）；
a、 文件。打开（“文本/html”）；
a、 document.write（panel.html（））；
a、 document.close（）；
a、 打印（）；
}
//////////////////////////启动谷歌地图API/////////////////
变量myOptions={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
，geocoder=new google.maps.geocoder（）；
功能中心（imap、iaddress、信息窗口、缩放）{
var映射；
map=新的google.maps.map（imap{
缩放：缩放，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var地址=iaddress；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
如果（信息窗口！=''）{
var infowindow=new google.maps.infowindow({
内容：信息窗口
});   
信息窗口。打开（地图、标记）；
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
setTimeout（function（）{$（'.map_container'）.find（'img'）.css（{'max-width'：'none'，'max-height'：'none'}）；}，500）；
}    
功能初始化（imap、ipanel、开始、结束、wp、行程模式选择、选项wp、可打印面板、DivContainerDistance）{
var directionsDisplay=new google.maps.DirectionsRenderer（{draggable:true}）
，directionsService=new google.maps.directionsService（）
，oldDirections=[]
，当前方向；
map=新的google.maps.map（imap，myOptions）；
方向显示.setMap（地图）；
方向显示设置面板（ipanel）；
google.maps.event.addListener（directionsDisplay，'directions_changed'，function（）{
如果（当前方向）{
oldDirections.push（当前方向）；
}
currentDirections=directionsDisplay.getDirections（）；
计算总距离（方向Display.directions，DivContainerDistance）；
});    
var waypts=[]
，dest=wp
，请求={
来源：start，
目的地:完，
航路点：航路点，
优化航路点：opt_wp，
travelMode:google.maps.DirectionsTravelMode[travel\u mode\u select]
};    
对于（变量i=0；i
+route.legs[i]。起始地址+”到“+路由。legs[i]。结束地址+”
”
+route.legs[i].distance.text+“

”；
}        
}
如果（状态！='OK'）{警报（状态）；返回false；}
setTimeout（function（）{$（'.map_container'）.find（'img'）.css（{'max-width'：'none'，'max-height'：'none'}）；}，500）；
}); 
setTimeout（function（）{$（'.map_container'）.find（'img'）.css（{'max-width'：'none'，'max-height'：'none'}）；}，500）；
}
函数computeTotalInstance（结果，DivContainerDistance）{
var合计=0；
var myroute=result.routes[0]；
对于（i=0；i

不幸的是，您发布的代码不足以让我们帮助您。请发布一个指向实时演示的链接（因为我们无法访问您的插件代码）或者共享一个，这样我们就可以重现问题并提供建议。@cabrerahector我可以提供插件文件吗？这是我试图实现这一点的页面。不幸的是，您发布的代码几乎不足以让我们帮助您。请发布一个到实时演示的链接（因为我们无法访问您的插件代码）或者共享一个，这样我们可以重现问题并提供建议。@cabrerahector我可以提供插件文件吗？这是我试图实现的页面