[SOLUCIONADO] Cargar mapa google maps

[mblascog]

Buenas,
He buscado por Internet, hay mucho pero no encuentro la manera de visualizar el mapa a partir de una dirección:

En la página tengo un php include:

Código PHP:

<?php include("inc_googlemaps.php"); ?>
 

Y en este include hay el siguiente código:

Código PHP:

<?php include "inc_googlemapsClau.php";  ?>
 
<script>
    //Declaramos las variables que vamos a user
    var geocoder = null;
    var map = null;
    var marker = null;
    
    initialize();
    
    function initialize() {
        geocoder = new google.maps.Geocoder();
        codeAddress();
        //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
        }); 
    }
    
    
    function codeAddress() {   
        var address = "Sant Vicenç, 12, Sabadell, España";
        //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);
            }
        });
    }
</script>
 

inc_googlemapsClau.php, contiene:

Código PHP:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=MI CLAVE" type="text/javascript"></script>
 

Alguna sugerencia. Gracias

[siddartha23]

Puede que tu api key no esté configurada para funcionar en el dominio donde quieres usar el mapa, prueba reemplazando por esto:

Código Javascript:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&language=es"></script>
 

[mblascog]

Buenas, lo he substituido y sigue sin salir nada.
No sé si se puede hacer algun tipo de rastreo para detectar el problema.

Gracias por tu ayuda.

[siddartha23]

Si funciona, solo tienes que ordenar tu código.

Cuando en la linea 13 llamas a la función codeAddress() dentro de ésta llamas al método setCenter() del objeto map pero éste solo esta definido como variable, no como un new Google map. Por lo tanto deberías mover la función codeAddress() después de crear el OBJETO map, incluso después de crear el objeto marker.

Luego en la condicional en la línea 15 la consola te va mostrar un error avisándote que lat no esta definido. Define la variable lat y lng.

Para detectar el problema siempre guíate de lo que te avise la consola (F12)

PD: el div donde coloques el mapa tiene que tener definido un alto.

[mblascog]

Con estas modificaciones ya se visualiza el mapa.
Muchas gracias