Google Maps показывает пустой с помощью API 3, и автозаполнение не работает

Question

Я пытаюсь предоставить службу направления с помощью 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 /////////////////