Customizar InfoWindow google maps

[tesla07]

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

[txemaarbulo]

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.