Foros del Web » Programando para Internet » Javascript »

Customizar InfoWindow google maps

Estas en el tema de Customizar InfoWindow google maps en el foro de Javascript en Foros del Web. Hola. lo que no he logrado hacer desde hacer una semana es colocarle estilos propios al infowindow de google maps miren tengo este codigo Código ...
  #1 (permalink)  
Antiguo 08/08/2013, 13:25
Avatar de tesla07  
Fecha de Ingreso: enero-2013
Mensajes: 42
Antigüedad: 11 años, 5 meses
Puntos: 0
Customizar InfoWindow google maps

Hola.

lo que no he logrado hacer desde hacer una semana es colocarle estilos propios al infowindow de google maps miren tengo este codigo

Código HTML:
<script type="text/javascript">
    //<![CDATA[
	
    var customIcons = {icon: '<?php print base_path() . path_to_theme(); ?>/img/punto-geolocalizacion.png',


    };

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(4.70073, -74.1445),
        zoom: 3,
        mapTypeId: 'roadmap',
		
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("<?php print base_path() . path_to_theme(); ?>/templates/phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
		  
        }
      });
    }
	
    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
		marker.setIcon('<?php print base_path() . path_to_theme(); ?>/img/punto-destino.png')
		map.setZoom(8);
		map.setCenter(marker.getPosition());
		var icon = customIcons[principal] || {};
      });
	  
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }
	
    function doNothing() {}

    //]]>

  </script> 
estoy llamando los markers y la info desde mysql generando un xml
hasta ahi todo va bien, los markers y demas ya los pude personalizar al igual que la info que esta dentro del infowindow.
lo que no logro hacer es cambiar el fondo, el borde y la posicion del infowindow.

Les agradezco su ayuda.

Gracias
__________________
Nuestros sentidos nos permiten percibir sólo una pequeña porción del mundo exterior.
  #2 (permalink)  
Antiguo 08/08/2013, 15:17
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Customizar InfoWindow google maps

En realidad es un tema muy poco tratado (menos en la V3), y que incluso en la galería de ejemplos de google escasean. Puedo mostrarte uno de su galería: http://gmaps-samples-v3.googlecode.com/.../infowindow-custom.html

A partir de la function InfoBox(opts) me permití desarrollar un pequeño tutorial que espero pueda serte de utilidad.

Si la administración de este foro tiene algún interés en ello, no duden en contactacme para remitirles el material y adaptarlo al estilo del foro.

Etiquetas: googlemaps
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 03:35.