Foros del Web - Ver Mensaje Individual

madman_18 · #1 (**permalink**) 21/02/2013, 04:12

Hola a todos!

Creo que este post va aquí si no estoy confundido jeje.

Querría consultaros cómo podría modificar propiedades sobre el google Maps que muestro en mi página.

Tengo el siguiente problema: cuando abro la página, y carga el mapa se me visualiza así:
http://es.zimagez.com/zimage/fallo10.php

Sin embargo, cuando hago click en el icono que señala la situación del sitio, me aparece bien:

http://es.zimagez.com/zimage/buena1....or zimagez.com

Os pongo el código con el que genero el mapa, y si pudierais echarme una mano os lo agradezco (he cambiado algunos parametros como las longitudes y la url del mapa).

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href='http://fonts.googleapis.com/css?family=Merienda' rel='stylesheet' type='text/css'>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #mapa_contenedor { height: 100%;font-family: 'Merienda', sans-serif;}
  .contenedor_infoMapas{width:300px;height:140px;}
  .tabla_empresa{font-family: 'Merienda', sans-serif;}  
  #titulo_empresa{color: #4B8CF7;font-size: 14px;}
  #describe_empresa{font-size: 12px;margin-top: -10px;}
  #contentInfoWindow{width: 800px;height:500px;}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {      
    // SE GENERA EL MAPA
    var mapita = new google.maps.LatLng(37.358697,-5.221102);
    /*****************/    
    // SE LE DAN LAS OPCIONES ZOOM - CENTER (DONDE ESTARÍA EL "CENTRO" DEL MAPA) - TIPO DE MAPA
    var opciones = {
        zoom: 17,
        center: new google.maps.LatLng(datos de longitud,datos de longitud),
        mapTypeId: google.maps.MapTypeId.SATELLITE //visor modo satelite
        /*mapTypeId: google.maps.MapTypeId.ROADMAP //tipo carretera*/
    };
    /***************************************************************************************/    
    // DIV DONDE SE VA A CREAR EL MAPA Y SE CREA EL MAPA
        var div = document.getElementById('mapa_contenedor');
        var map = new google.maps.Map(div,opciones);
    /*****************************************************/
    // SE GENERA EL MARCADOR Y SE PONE EN EL MAPA
    var marcador = new google.maps.Marker({
       position: new google.maps.LatLng(datos de longitud,datos de longitud),
       map: map
    });
    /********************************************/
    // DATOS QUE SE QUIERE EN LA VENTANA INFO
    var contenido = '<div class=contenedor_infoMapas>\n\
                   <table class=tabla_empresa>\n\
                    <tr>\n\
                        <td id=titulo_empresa><b><a href=url del mapa target=_blank> minombre</a></b></td></tr></table><br/>\n\
                    <table id=describe_empresa>\n\
                        <tr>\n\
                           <td>dato1</td>\n\
                        </tr>\n\
                        <tr>\n\
                            <td>dato3</td></tr><tr><td>dato2</td>\n\
                        </tr>\n\
                        <tr>\n\
                            <td><a href=# title="Contacte con nosotros">el email</a></td>\n\
                        </tr>\n\
</div>\n\
</table>';
   /*****************************************/
   /*SE CREA EL OBJETO VENTANA INFO*/
   var infowindow = new google.maps.InfoWindow({
        content: contenido
    });   
   //CON ESTO SE LE AÑADE EL EVENTO CLICK SOBRE EL MARCADOR POR SI LO CIERRAN MOSTRARÍA EL MAPA DE NUEVO.
   google.maps.event.addListener(marcador, 'click', function() {
       infowindow.open(map, marcador);
    });    
    infowindow.open(map, marcador); //PARAMETROS : 1- EL MAPA YA CONSTRUIDO, 2- EL MARCADOR ESTO LO ABRE AL CARGAR EL MAPA
}
</script>
</head>
<body onload="initialize()">
  <section id="mapa_contenedor" style="width:100%;height:100%"></section>
</body>
</html>