WordPress Geocoding using direction or a map

I’m trying to make a WordPress page where the user can point to a location by writing the adress or browsing a map`.

As you can see in the page (http://www.levinor.es/pruebas/pagina-ejemplo/) the map isn’t loading and I don’t know why… I checked the API Key, and the allowed domains (.levinor.es/) of the key… Please I need some help…

To do so I created this javascript (google-maps.js) and placed it in the script folder of my theme:

//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());

  }

I placed the next code into the funcionts.php file for referencing the js (I doubled checked the page ID and my API Key):

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' ) );
}

}

And added to my header.php:

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

The code of the page is:

<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>

I will be very gratefull if someone can help me. Thanks!