CODEWITHSUNDEEP
google-maps-api-3weather
jcarlosweb
jcarlosweb

Reputation: 974

Google weather library

I'm using Google library time showing it on the map.

The problem I have is that the first window that displays is very small and you have to scroll. How do I control the size of this window?

Second, I would like to only show the map for the coordinates that I give, and show me the least time around I want. How do I do that?

This is my code in here:

         function generartiempo(36.745,-3.87665,'mapatiempo') {
            var mapOptions = {
          zoom: 11,
          center: new google.maps.LatLng(lat,lng,true),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infowindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById('mapatiempo'),
            mapOptions);

        var weatherLayer = new google.maps.weather.WeatherLayer({
          temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS,
          windSpeedUnit: google.maps.weather.WindSpeedUnit.KILOMETERS_PER_HOUR
        });


        weatherLayer.setMap(weatherLayer.getMap() ? null : map);

        var cloudLayer = new google.maps.weather.CloudLayer();
        cloudLayer.setMap(map);

    }
<div id="mapatiempo"></div>
#mapatiempo {
width: 268px;
height: 200px;
border: 1px solid #AAAAA8;
margin-bottom: 5px;
margin-top: 15px;
}

Can anyone help? edit example:http://jsfiddle.net/webyseo/YW2K7/12/ solution? thanks!!!!!

Upvotes: 2

Views: 2227

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117324

There is no option to define the size of the default infoWindow. Furthermore the size of an infoWindow is restricted by the size of the map, it can't be larger, so you need to enlarge the map.

What you can do: override the default infoWindow with a custom infoWindow and define the content on your own, so that it fit's into a smaller infoWindow

Sample code for a custom infoWindow:(assuming a variable containing the google.maps.Map)

    //create the weatherLayer
    var weatherLayer = new google.maps.weather.WeatherLayer({
      temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT,
      clickable:true,
      suppressInfoWindows:true
    });

    //create InfoWondow-instance
    var weatherWindow=new google.maps.InfoWindow();

    //observe click-event
    google.maps.event.addListener(weatherLayer,'click',function(e){

      //hide infoindow
      weatherWindow.close();

      var content  = document.createElement('ul'),
          weather  = e.featureDetails.forecast,
          unit     = '°'+e.featureDetails.temperatureUnit.toUpperCase();

        //merge current weather and forecast
        weather.push(e.featureDetails.current);

        //create some content(here a short summary)
        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+')';


        }
        //set content and position of the infoWindow
        weatherWindow.setOptions({position:e.latLng,content:content});
        //...and open the infowindow
         weatherWindow.open(map);
    });
    weatherLayer.setMap(map);

Demo: http://jsfiddle.net/doktormolle/pnAyD/

Upvotes: 1

Related Questions