Wordpress Geocoding using direction or a map - php

Question

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!

Answer 1

Google has disabled the use pt the Maps API for this application. The key you used is not valid or is not authorized for Google maps JavaScript API.
If you obtained this key you still need to enable the use of the JavaScript API
Go to this link for more info:
https://developers.google.com/maps/documentation/javascript/tutorial