Solved

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

Posted on 2013-01-31
13
677 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Several part series to implement Internet Explorer 11 Enterprise Mode
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

867 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

22 Experts available now in Live!

Get 1:1 Help Now