Геокодирование WordPress с использованием направления или карты

Я пытаюсь сделать страницу WordPress, где пользователь может указать на местоположение, написав адрес или просматривая карту.

Как вы можете видеть на странице ( http://www.levinor.es/pruebas/pagina-ejemplo/ ) карта не загружается, и я не знаю, почему … Я проверил ключ API и разрешил Домены ( .levinor.es / ) ключа … Пожалуйста, мне нужна помощь …

Для этого я создал этот javascript (google-maps.js) и поместил его в папку сценария моей темы:

//Declaramos las variables que vamos a user var lat = null; var lng = null; var map = null; var geocoder = null; var marker = null; jQuery(document).ready(function(){ //obtenemos los valores en caso de tenerlos en un formulario ya guardado en la base de datos lat = jQuery('#lat').val(); lng = jQuery('#long').val(); //Asignamos al evento click del boton la funcion codeAddress jQuery('#pasar').click(function(){ codeAddress(); return false; }); //Inicializamos la función de google maps una vez el DOM este cargado initialize(); }); function initialize() { geocoder = new google.maps.Geocoder(); //Si hay valores creamos un objeto Latlng if(lat !='' && lng != '') { var latLng = new google.maps.LatLng(lat,lng); } else { //Si no creamos el objeto con una latitud cualquiera como la de Mar del Plata, Argentina por ej var latLng = new google.maps.LatLng(37.0625,-95.677068); } //Definimos algunas opciones del mapa a crear var myOptions = { center: latLng,//centro del mapa zoom: 15,//zoom del mapa mapTypeId: google.maps.MapTypeId.ROADMAP //tipo de mapa, carretera, híbrido,etc }; //creamos el mapa con las opciones anteriores y le pasamos el elemento div map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //creamos el marcador en el mapa marker = new google.maps.Marker({ map: map,//el mapa creado en el paso anterior position: latLng,//objeto con latitud y longitud draggable: true //que el marcador se pueda arrastrar }); //función que actualiza los input del formulario con las nuevas latitudes //Estos campos suelen ser hidden updatePosition(latLng); } //funcion que traduce la direccion en coordenadas function codeAddress() { //obtengo la direccion del formulario var address = document.getElementById("direccion").value; //hago la llamada al geodecoder geocoder.geocode( { 'address': address}, function(results, status) { //si el estado de la llamado es OK if (status == google.maps.GeocoderStatus.OK) { //centro el mapa en las coordenadas obtenidas map.setCenter(results[0].geometry.location); //coloco el marcador en dichas coordenadas marker.setPosition(results[0].geometry.location); //actualizo el formulario updatePosition(results[0].geometry.location); //Añado un listener para cuando el markador se termine de arrastrar //actualize el formulario con las nuevas coordenadas google.maps.event.addListener(marker, 'dragend', function(){ updatePosition(marker.getPosition()); }); } else { //si no es OK devuelvo error alert("No podemos encontrar la dirección, error: " + status); } }); } //funcion que simplemente actualiza los campos del formulario function updatePosition(latLng) { jQuery('#lat').val(latLng.lat()); jQuery('#long').val(latLng.lng()); } 

Я поместил следующий код в файл funcionts.php для ссылки на js (я дважды проверял идентификатор страницы и мой ключ API):

• Отключите кнопку «ставка» на страницах продукта WooCommerce для автора
• Как получить данные из базы данных через jquery?
• Копирование продуктов WooCommerce Цены на продажу до обычных цен и сброса Цены продажи
• Пользовательские поля для фоновых изображений Div? (WordPress)
• Изменить цикл WordPress для вывода всех изображений в сообщении с эскизами, включенными в тег изображения?

 add_action('template_redirect','carga_archivos'); function carga_archivos(){ if( is_single(2)) // tu número de post o slug { wp_enqueue_script( 'google-api','http://maps.googleapis.com/maps/api/js?key={MY API KEY}&sensor=true', array( 'jquery' ) ); wp_enqueue_script( 'google-maps', get_bloginfo('stylesheet_directory') . '/js/google-maps.js', array( 'google-api' ) ); } 

}

И добавил к моему header.php:

 <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key={MY API KEY}&sensor=true"></script> 

Код страницы:

 <form id="google" action="#" name="google"><label>Número de Revista</label> <input id="numerorevista" type="int" name="numerorevista;" value="0" /> <label>Dirección donde será liberada</label> <input id="direccion" type="text" name="direccion" /> <button id="pasar">Pasar al mapa</button> <!-- div donde se dibuja el mapa--> <div id="map_canvas" style="width: 450px; height: 300px;"></div> <!--campos ocultos donde guardamos los datos--> <input id="lat" type="text" name="lat" /> <input id="long" type="text" name="lng" /> </form> 

Я буду очень благодарен, если кто-то может мне помочь. Благодаря!