CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Isham Mohamed
Isham Mohamed

Reputation: 2789

Loading animation in Google maps infowindow

I have developed this http://weathermap.cloudcontrolled.com/ from where you can click on a place and get the current weather details in it. Everything is working properly but its getting small delay after click on a place to show weather. For that I would like to show a small loading animation inside the infowindow and after the weather data available it will show the weather in the same infowindow. How to do this. (this is pure html/js site, you can view source code by pressing ctrl+u)

Upvotes: 1

Views: 2423

Answers (2)

kcode
kcode

Reputation: 1

You could also try the following

google.maps.event.addListener('click', showLoading);

function showLoading(event) {
  var contentString = '<img src="images/loading.gif">';

  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  getWeather(event.latLng.lat(),event.latLng.lng(),function (data) {
    contentString = "<b>"+data.list[0].name+"</b><br>"+data.list[0].weather[0].description+"<br><center><img src=http://www.openweathermap.com/img/w/"+data.list[0].weather[0].icon+".png></center>"
    infowindow.setContent(contentString);
  });

  infoWindow.open(map);
};

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85538

Yes. Get an animated icon from http://www.ajaxload.info/, call it ajaxicon.gif

Change your map click event to :

google.maps.event.addListener(map, 'click', function(event) {
    //call function to create marker
         if (marker) {
            marker.setMap(null);
            marker = null;
         }
    // why do you recreate the marker over and over ??
    marker = createMarker(event.latLng, 'name', '<img src="ajaxicon.gif">');

    getWeather(event.latLng.lat(),event.latLng.lng(),function (data) {
        infowindow.setContent("<b>"+data.list[0].name+"</b><br>"+data.list[0].weather[0].description+"<br><center><img src=http://www.openweathermap.com/img/w/"+data.list[0].weather[0].icon+".png></center>");
    });
});
  1. create the marker, place animated ajax-icon in the infoWindow through your createMarker function
  2. on success / callback, replace infowindow content with actual weather content

Upvotes: 1

Related Questions