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!