Soporte » Plugins y Hacks » Carga Google Maps desde JavaScript

  • Resuelto levinor

    (@levinor)


    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&oacute;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.