Foros del Web » Programando para Internet » Javascript »

Insetar estilos en infowindow, googlemaps

Estas en el tema de Insetar estilos en infowindow, googlemaps en el foro de Javascript en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 16/12/2008, 10:17
 
Fecha de Ingreso: enero-2008
Ubicación: Valencia
Mensajes: 23
Antigüedad: 16 años, 3 meses
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
  #2 (permalink)  
Antiguo 16/12/2008, 11:18
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Insetar estilos en infowindow, googlemaps

Tema trasladado a Javascript.
  #3 (permalink)  
Antiguo 16/12/2008, 11:22
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 16 años
Puntos: 2534
Respuesta: Insetar estilos en infowindow, googlemaps

bueno, aquí en el foro... no sabemos todo!

a pesar de que es un tema de Javascript

¿¿ no has revisado la API que Google te ofrece, esta completisima... ???


pienso, debiste primero leerte la API de Maps ... y luego, lo demás...
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #4 (permalink)  
Antiguo 16/12/2008, 14:39
 
Fecha de Ingreso: enero-2005
Ubicación: Málaga
Mensajes: 17
Antigüedad: 19 años, 3 meses
Puntos: 1
Respuesta: Insetar estilos en infowindow, googlemaps

A ver, yo al utilizar las ventanas infoWindow las abro de otra forma, pero si no me equivoco, tú no estás metiendo en la variable html el tag que defina la clase, es decir, cuando tu pones
var html = $(this).attr('nombre')+"<br />";
html += $(this).attr('direccion')+"<br />";
html += $(this).attr('contacto');
deberías poner algo como
var html = "<div class=\"etiqueta\">' + $(this).attr('nombre') + '<br />";
html += $(this).attr('direccion')+"<br />";
html += $(this).attr('contacto') + "</div>";

No se si se me está pasando algo obvio, pero yo con mis mapas puedo hacerlo. No obstante debes saber que no se puede aplicar un estilo a toda la "infoWindow", si no solo al contenido.

Prueba y dices.

Bye
  #5 (permalink)  
Antiguo 08/01/2009, 01:51
 
Fecha de Ingreso: enero-2008
Ubicación: Valencia
Mensajes: 23
Antigüedad: 16 años, 3 meses
Puntos: 0
De acuerdo Respuesta: Insetar estilos en infowindow, googlemaps

Cita:
Iniciado por LOLoMATS Ver Mensaje
A ver, yo al utilizar las ventanas infoWindow las abro de otra forma, pero si no me equivoco, tú no estás metiendo en la variable html el tag que defina la clase, es decir, cuando tu pones
var html = $(this).attr('nombre')+"<br />";
html += $(this).attr('direccion')+"<br />";
html += $(this).attr('contacto');
deberías poner algo como
var html = "<div class=\"etiqueta\">' + $(this).attr('nombre') + '<br />";
html += $(this).attr('direccion')+"<br />";
html += $(this).attr('contacto') + "</div>";

No se si se me está pasando algo obvio, pero yo con mis mapas puedo hacerlo. No obstante debes saber que no se puede aplicar un estilo a toda la "infoWindow", si no solo al contenido.

Prueba y dices.

Bye
Gracias men!, por lo visto es así como es la cosa, ahora el problema es que no aparece el campo nombre, en la infowindow se ve esto "+$(this).attr('nombre')'+" (con el color y la tipografía del css) y el los otros 2 campos si se ven bien con el estilo igual.

Es decir, donde debe ir "nombre" aparece esto "+$(this).attr('nombre')'+"

Tarde ya que tenia un tiempo sin pasar por acá pero mil gracias!

Si tienes alguna idea de por que sucede, pos a postear jeje..
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:51.