asked on

callback with Google Maps API v 3 and Google Fusion Table API v1

I'm attempting to retrieve data from a Google Fusion table using

var script = document.createElement("script");

       script.setAttribute("src","https://www.googleapis.com/fusiontables/v1/query?sql=SELECT * FROM " +
        tableid + " WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(" + coordinate.lat() + "," + coordinate.lng() + ", 0.001))&callback=addInfoWindow&key=" + apiKey);
    document.getElementsByTagName("head")[0].appendChild(script);

Open in new window

Using console.log("pin clicked"), I can confirm that addInfoWindow() is being launched. However, the corresponding infoWindow doesn't open. The problem is how I'm trying to receive the data in the response.

https://developers.google.com/fusiontables/docs/samples/mouseover_map_styles recommends to do it this way:

// reduced from the actual version for simplicity sake
function addInfoWindow(data) {

       infowindow.close();
       var rows = data['rows'];
       for (var i in rows) {

          if (rows[i][0]['name'] != '') 
         {
             initialize();
             infowindow.setContent(rows[i][0]['name']);
         }
         else
        {
           initialize(); 
           infowindow.setContent("nothing");
        }

       infowindow.setPosition(coordinate);
       map.setCenter(coordinate);
       map.setZoom(15);
       infowindow.open(map);
        
}

Open in new window

I never make it in the for loop when this script runs, though.

ASKER CERTIFIED SOLUTION

Robert Schutt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mcmontyCS

ASKER

Thanks, @rober_schutt. You were indeed correct about the closing parenthesis. There were several other issues with my code as well which have been corrected to the following:

function addInfoWindow(data) {

	infowindow.close();
        initialize();
	
	var rows = data['rows'];
	
	if (rows)
        {
		for (var i = 0; i < 1; i++)
		{

			infowindow.setContent(rows[i][1] + rows[i][0]);
 			infowindow.setPosition(coordinate);
        		map.setCenter(coordinate);
			map.setZoom(15);
        		infowindow.open(map);
			
		}
	}
	else
	{
		infowindow.setContent("Not available");
    		map.setCenter(coordinate);
		map.setZoom(15);
        	infowindow.open(map);
	}
	
}



function generateInfoWindow(results, status) {
    
	initialize();

	if (status == google.maps.GeocoderStatus.OK) 
	{
		initialize();
		//center and zoom map
		coordinate = results[0].geometry.location;
 
        marker = new google.maps.Marker({
			map: map,
			layer: layer,
			animation: google.maps.Animation.DROP,
			position: coordinate
		});
		map.setCenter(results[0].geometry.location);
		map.setZoom(15);
		
		
 	// Initialize JSONP request
        var script = document.createElement('script');
        var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
        url.push('sql=');
        var query = "SELECT * FROM " +
        tableid + " WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(" + coordinate.lat() + "," + coordinate.lng() + "), 0.001))";
        var encodedQuery = encodeURIComponent(query);
        url.push(encodedQuery);
        url.push('&callback=addInfoWindow');
        url.push('&key=' + apiKey);
        script.src = url.join('');
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(script);

			 
   	} 
	else 
	{
        	alert("Please make sure you entered your City and State");
    	}

}

Open in new window