Solved

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

Posted on 2013-01-31
13
672 Views
Last Modified: 2013-02-04
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.
0
Comment
Question by:mcmontyCS
  • 7
  • 6
13 Comments
 
LVL 11

Expert Comment

by:mcnute
ID: 38841044
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
 

Author Comment

by:mcmontyCS
ID: 38841345
Thanks, @mcnute. I've corrected those errors.
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38841371
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
 

Author Comment

by:mcmontyCS
ID: 38841412
The pin drops after you enter an address. However, an infowindow is suppose to open as well - but it's not.
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38841450
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
 
LVL 11

Expert Comment

by:mcnute
ID: 38841461
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:mcmontyCS
ID: 38841521
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
 

Author Comment

by:mcmontyCS
ID: 38841538
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
 
LVL 11

Expert Comment

by:mcnute
ID: 38841605
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
 
LVL 11

Accepted Solution

by:
mcnute earned 500 total points
ID: 38841639
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
 

Author Comment

by:mcmontyCS
ID: 38841826
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
 

Author Comment

by:mcmontyCS
ID: 38844063
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
 

Author Comment

by:mcmontyCS
ID: 38851602
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to count occurrences of each item in an array.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now