Google Maps API v 3 with new Google Fusion Table API v1

I recently received an email from Google advising me to update my map's code. I followed instructions available on their Migration Guide. Everything is functioning properly now except the infoWindow. When I type in an address, and hit search, it properly drops the pin on the map but does not open an infoWindow with corresponding content. This is the code snippet that I believe is not correct.

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.1))&jsonCallback=addInfoWindow");
        document.getElementsByTagName("head")[0].appendChild(script);

Open in new window


I've tried both jsonCallback and callback parameters. Both yield the same results.

Here's the link for reference: Map

Thank you for your assistance.
mcmontyCSAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
mcnuteConnect With a Mentor Commented:
One last hint: Add a console.log('pin clicked'); to the callback addInfoWindow() to check if the click event is even fired when clicking on it.

And on the picture below it gives a 404 error of your script. That means that your script is never attaching the callback to your pin. See the screenshot for this.
Bildschirmfoto-2013-01-31-um-23..PNG
0
 
mcnuteCommented:
You have a few errors in your console. It is best practice first to make sure there aren't any errors in the console before trying to optimize a script.
Bildschirmfoto-2013-01-31-um-21..PNG
0
 
mcmontyCSAuthor Commented:
Thanks, @mcnute. I've corrected those errors.
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
mcnuteCommented:
It seams that you're having still a few of these errors.

You say that the pin is pointed correctly, in google chrome is no pin visible on the map.
Bildschirmfoto-2013-01-31-um-22..PNG
0
 
mcmontyCSAuthor Commented:
The pin drops after you enter an address. However, an infowindow is suppose to open as well - but it's not.
0
 
mcnuteCommented:
You're also importing jquery twice. Correct this and even the other errors must be corrected otherwise I won't start debugging your pin info box problem. First clear up your basic problems and then we start looking at your map api.

This is to make this process effecient. I've seen that you've not cleared your errors in the first place and thus not taking serious enough my advice.
0
 
mcnuteCommented:
Another thing I've seen, is that the code snippet you've posted is in google api version 1 and you've said to be migrating to v3. How is that supposed to work out? Make your script up to date with version 3 and it will start to work.
0
 
mcmontyCSAuthor Commented:
It seems the CMS is adding an additional section of code to the header. The console in IE is not showing these errors. I've modified the header to reflect your comments thus. It's the mysterious addition of

<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/dropline.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/dropline_ie.css" />
<![endif]-->
	<script type="text/javascript" src="manager/media/script/mootools/mootools.js"></script>
	<script type="text/javascript" src="assets/snippets/ajaxSearch/js/ajaxSearch'0'/ajaxSearch.js"></script>
<!-- start AjaxSearch header -->
<script type="text/javascript">
//<![CDATA[
asvar=new Array();asvar[0]='{"vsn":"1.9.2","adv":"oneword","sub":"","bxt":"Search here...","cfg":"&ajaxSearch=`\'0\'` &landingPage=`8` "}';
//]]>
</script>
<!-- end AjaxSearch header -->

Open in new window


that is creating the problem. I did locate the second jquery call you were referencing. It has been removed.
0
 
mcmontyCSAuthor Commented:
I changed it to v3 instead of v1. My understanding is v1 is referencing version 1 of Fusion Tables not version 1 of the Google Maps API. It is now v3 but the problem persists.
0
 
mcnuteCommented:
Ok, the version 1 of fusion tables is alright:

According to their documentation your url should look like something like this:
<script src="https://www.googleapis.com/fusiontables/v1/tables/1e7y6mtqv891111111111_aaaaaaaaa_CvWhg9gc/templates?callback=handler&key=YOUR-KEY"></script>

Open in new window


So your api key is in the end of the url. The callback handler has no brackets. These two are the first things which come to my eyes. Try to modify your url according to this example.
0
 
mcmontyCSAuthor Commented:
You are correct. I added console.log('pin clicked') which confirms your statement. I modified the URL, but the query= does make the setup a little different.

I just found this post (https://developers.google.com/fusiontables/docs/samples/open_infowindow)on the Google Developers forum which is exactly what I'm needing to do.

I appreciate your attention in helping me rule out obvious errors. I'll update this thread with the final solution but will award you all of the points for the time you have provided to this quest.
0
 
mcmontyCSAuthor Commented:
Correct code to launch addInfoWindow:

 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);

Open in new window

0
 
mcmontyCSAuthor Commented:
Final working code:

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

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.