Carga Google Maps desde JavaScript
-
Hola!
Quiero insertar un mapa en una página que, o bien poniéndole una dirección o bien señalando un punto en el mapa, me de las coordenadas adecuadas. La página de pruebas para esto es: http://www.levinor.es/pruebas/pagina-ejemplo/
Como podéis ver en la página he incluido el siguiente código:
<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>
Pero no me está cargando el mapa en la div donde debería. He añadido un fichero google-map.js a la carpeta de js de mi tema en uso:
//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()); }
Y he incluido en el archivo functions.php de mi tema el código cargando el js:
//necesario para poder usar is_page o is_single 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=AIzaSyA5X2GiHesV86f6s6Q31duRG4-vZ9vcxfU&sensor=true', array( 'jquery' ) ); wp_enqueue_script( 'google-maps', get_bloginfo('stylesheet_directory') . '/js/google-map.js', array( 'google-api' ) ); } }
He comprobado que tanto el APIKey como el ID de la página son correctos, pero aun así sigue sin cargarme el mapa. ¿Necesito algún plugin instalado o me lo debería cargar?
Gracias y un saludo
Viendo 1 respuesta (de un total de 1)
Viendo 1 respuesta (de un total de 1)
- El debate ‘Carga Google Maps desde JavaScript’ está cerrado a nuevas respuestas.