Weather Layer in Google Maps

Hello,

I have added a weather's layer to Google Maps plugin succesfully, but i need a button to display or hide this layer (because i have a lot of markers and could be confusing with all the weather icons). In other words, i want a button -or link- where my users could show or hide the weather's layer.

The way that i have found to add the layer -including previously the weather lib- is:

$(document).bind("agm_google_maps-user-map_initialized", function(e, map, data) {
weatherLayer = new google.maps.weather.WeatherLayer();
weatherLayer.setMap(map);});

I have added the button using jquery too, but i dont know how add the toggle functionallity to the button.

Any idea??

Thanks

  • Timothy Bowers

    Hey there.

    It's not something I've ever tried to do to be honest. Our developer on this plugin is more familiar with Google Maps so might be able to offer some pointers so I'll give him a quick ping.

    However it might be the case that you'll need something custom made by yourself or a hired developer, perhaps if that's the case then Tweaky might be able to help out:

    https://www.tweaky.com

    Take care.

  • Vladislav

    Hi,

    The quickest way is to call the overlay object's .setMap(null) method, passing it null value as the argument: https://developers.google.com/maps/documentation/javascript/overlays#RemovingOverlays

    You could, for an example, wrap your entire code (map initialization, click handler and all) in a self-executing js function and just define the variable that will hold the overlay object in that scope. On map initialization, you assign it the actual weather overlay object. On button click, you check if the overlay object is set and, if it is, call the setMap(null) on it. You could also locally cache the map instance passed to map initialization event and toggle the weather layer on button click.

    By the way, the agm_google_maps-user-map_initialized event is pretty much meant to be used in this way and for these kinds of things, I'm happy you managed to find your way around the plugin code.

  • Jaime

    Thanks Vladislav,

    I have solved the problem. Finally i have modified your google_maps_user.js script adding two functions to the handler, one for the creation of the layer and another one for the toggle effect:

    var createWeather = function (){
    weatherLayer = new google.maps.weather.WeatherLayer();
    }

    var toggleWeather = function () {
    weatherLayer.setMap(weatherLayer.getMap() ? null : map);
    }

    After this i have modified the init function: calling the createWeather function, adding a checkbox -with class agm_mh_weather- and handling the click event:

    createWeather();

    $("#place").append("<input type='checkbox' class='agm_mh_weather'/><span>Weather</span>");

    $('.agm_mh_weather').live('click', toggleWeather);

    The result is perfect!!

    Thank you so much for your help and your fantastic plugin!!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.