google maps: custom infoWindow for weatherlayer

see: http://stackoverflow.com/questions/14727002/google-weather-library/14733063#comment20618371_14733063

by Emmanuel Garcia

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=weather&amp;.js"></script>
<div id="map_canvas"></div>

CSS

#map_canvas{
width: 268px;
height: 200px;
border: 1px solid #AAAAA8;
margin-bottom: 5px;
margin-top: 15px;
}
ul.weather{margin:0;padding:0;}
ul.weather li{font-size:11px;margin:0;padding:0;list-style-position:inside;}

JavaScript

function initialize() {
        var mapOptions = {
          zoom: 6,
          center: new google.maps.LatLng(49.265984,-123.127491),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        var weatherLayer = new google.maps.weather.WeatherLayer({
          temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT,
          clickable:true,
          suppressInfoWindows:true
        });
          var weatherWindow=new google.maps.InfoWindow();
        google.maps.event.addListener(weatherLayer,'click',function(e){
          weatherWindow.close();
        console.log(e)
        var content  = document.createElement('ul'),
            weather  = e.featureDetails.forecast,
            unit     = '°'+e.featureDetails.temperatureUnit.toUpperCase();
            content.className="weather";
            weather.push(e.featureDetails.current);
            for(var i = 0; i<weather.length; ++i){
              var item = content.appendChild(document.createElement('li'))
                          .appendChild(document.createTextNode(''))
                  w    = weather[i];
                  item.data='['+w.shortDay+']'+w.description+
                            '('+w.low+unit+'/'+w.high+unit+')';
              
              
            }
            weatherWindow.setOptions({position:e.latLng,content:content});
             weatherWindow.open(map);
        });
        weatherLayer.setMap(map);


      }
      google.maps.event.addDomListener(window,'load',initialize);