Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/12/2008, 10:17
daniel_acevedo
 
Fecha de Ingreso: enero-2008
Ubicación: Valencia
Mensajes: 23
Antigüedad: 17 años
Puntos: 0
Insetar estilos en infowindow, googlemaps

Saludos, he tratado de leer por ahi pero no he conseguido la solución..

lo que nesesito es darle formato a los infowindow de google maps, he logrado hacerlo en el formulario, como pueden ver acá

http://www.residenciaslaredo.com/ett/maps_form.php (si le dan click en cualquier lado les abre un formulario)

Pero no lo he logrado para ponerle estilos a los markers ya creados.

Paso el code

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<
title>Formularios en Google Maps</title>
<
link href="estilos.css" rel="stylesheet" type="text/css" />
<
script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAIIDbl_ciQDacBgo0AqmyUBTP57_sWC09JVsUBjOq_8dmqEYAyhQECq8os4J_NHYLLdNy5_s2IW_4cw" type="text/javascript"></script>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    
    var mark;
    var pointA;
    
    if (GBrowserIsCompatible()) {
        var m = $("#map")[0];
        
        if(m) {
            var map = new GMap2(m);
            // iniciamos el mapa en esta ubicacion, tu puedes ubicarla donde gustes
            var start = new GLatLng(-38.765392,-72.594482);
            // otras configuraciones
            var zoomLevel = 15;
            map.setCenter(start, zoomLevel);
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            
            [B]// lectura del archivo markers.xml con jQuery[/B]
            $.get('generadorxml.php',function(data) {  
                $(data).find('marker').each(function(){
                    var lat    = $(this).attr('lat');  
                    var lng    = $(this).attr('lng');  
                    var html   = $(this).attr('nombre')+"<br />";
                    html      += $(this).attr('direccion')+"<br />";
                    html      += $(this).attr('contacto');
                    var point  = new GLatLng(lat,lng);  
                    var marker = new GMarker(point);  

                    map.addOverlay(marker);  

                    GEvent.addListener(marker, "click", function() {  
                        marker.openInfoWindowHtml(html);  
                    });
       
                });

            });

            // en cada nueva marca aparecera el formulario HTML
            GEvent.addListener(map, 'click', function(overlay, point){
                if(mark) {
                    map.removeOverlay(mark);
                }
                if(point) {
                    pointA = new GPoint(point.x, point.y);
                    mark = new GMarker(pointA);
                    map.addOverlay(mark);
                    map.getCenter(point);
                    var lat = point.y;
                    var lng = point.x;
                    var form = 
                    "<form action=\"maps_form.php\" method=\"post\">"+
                        "<input type=\"hidden\" name=\"lat\" value=\""+lat+"\" />"+
                        "<input type=\"hidden\" name=\"lng\" value=\""+lng+"\" />"+
                        "<span class=\"etiqueta\">Nombre:</span><br /><input class=\"cajetin\" type=\"text\" name=\"nombre\" value=\"\" /><br />"+
                        "<span class=\"etiqueta\">Direccion:</span><br /><input class=\"cajetin\" type=\"text\" name=\"direccion\" value=\"\" /><br />"+
                        "<span class=\"etiqueta\">Contacto:</span><br /><input class=\"cajetin\" type=\"text\" name=\"contacto\" value=\"\" /><br /><br />"+
                        "<input class=\"boton\" type=\"submit\" name=\"submit\" value=\"Publicar punto\" />"+
                    "</form>";
                    map.openInfoWindowHtml(point,form);
                }
            });
        }
    }
});
</script>
</head>

<body>
<div id="map" style="width:1000px;height:600px;"></div>
</body>
</html> 
Osea, nesesito colocar estilos a los markers que vengan de generadorxml.php