CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Vince Lowe
Vince Lowe

Reputation: 3620

gmap3 show address in infowindow

I have a click event on my map markers to create an infowindow, i am trying to geocode the address to show inside the infowindow.

            click: function(marker) {
                pantoUser(lati,longi,i);
                addInfoWindow(lati,longi,name,datestring);
            }

I nearly have it working like so:

function addInfoWindow(lati,longi,name,datestring)
{
 // get address  
getAddress(lati,longi);

 // create infowindow
$('#dispatcher').gmap3(
  { action: 'addInfoWindow',
    latLng: [lati, longi],
    infowindow:{
      options:{
        content: name
      },
      events:{
        closeclick: function(infowindow, event){
          //alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
        }
      },
      apply:[
        { action:'setContent', 
          args:[
          '<span class="infowindow">' + name + '<br />' + content + '<br />' + datestring + '<span>'
          ]
        }
      ]
    }
  }
);

}

and then the get address part:

 function getAddress(lati,longi)
{
    $("#dispatcher").gmap3({
             action:'getAddress',
             latLng: [lati, longi],
             callback:function(results){
             content = results && results[1] ? results && results[1].formatted_address : 'No Address';
         return content;
                }

       });
}

The problem is that the geocoded address is always one marker click behind. For example i may click on a marker in london and nothing happens. So i click it again and i get the infowindow with the address. Then i click on a marker in Manchester and i still see the london address, then i click on a marker in Liverpool and i get the Manchester address. and so on.

Can anyone spot the bug?

UPDATED WORKING SOLUTION FROM SEAN Added the infowindow code in the callback

function addInfoWindow(lati,longi,name,datestring)
{
// get address
$("#dispatcher").gmap3({
     action:'getAddress',
     latLng: [lati, longi],
     callback:function(results){
     content = results && results[1] ? results && results[1].formatted_address : 'No Address';

// create infowindow       
$('#dispatcher').gmap3(
  { action: 'addInfoWindow',
    latLng: [lati, longi],
    infowindow:{
      options:{
        content: name
      },
      events:{
        closeclick: function(infowindow, event){
          //alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
        }
      },
      apply:[
        { action:'setContent', 
          args:[
          '<span class="infowindow">' + name + '<br />' + content + '<br />' + datestring + '<span>'
          ]
        }
      ]
    }
  }
);

    } // end callback

 });

}

Upvotes: 2

Views: 2259

Answers (1)

Sean Mickey
Sean Mickey

Reputation: 7716

This doesn't look like standard Google Maps JavaScript v3 code; is the gmap3 reference to something from jQuery? Also, something doesn't seem to be hanging together - the getAddress function returns content, but the code in your addInfoWindow function doesn't seem to be using the value.

But it sounds like the source of your problem may lie in the callback aspect of the code within the getAddress function; you cannot be sure that the callback will have completed when the code following that call within addInfoWindow runs. It sounds like the following may be happening:

  1. addInfoWindow function is called
  2. From within addInfoWindow the getAddress function is called
  3. getAddress runs and completes quickly, returning control to the addInfoWindow function, but the callback has not yet run
  4. The first time the code runs, the content has not yet been built (because the callback has not yet run), so nothing is displayed
  5. Following return of the addInfoWindow function, the getAddress callback runs because the response is received, which establishes the content
  6. addInfoWindow is called again, runs the same way, but this time it uses the content that was setup following the last callback, so it is using the content from the previous run
  7. The scenario just repeats, repeats, repeats

There are some confusing parts of your question and it's a little hard to be sure without being able to add alert calls to the code or see the code run, but it sounds very likely that your code is following the steps I describe above or something very similar.

If it sounds like that fits your problem, the most straightforward way to get around it is to put the InfoWindow display code in with the callback code. That way, you know the content will have been set up, because the callback runs when the response is returned.

Upvotes: 1

Related Questions