Solved

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

Posted on 2013-01-31
13
693 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
SendBlaster Pro 4 - Bulk Email Sending Software

SendBlaster 4 Pro - Best Bulk Emailing Sending Software
Automatic Subscribe / Unsubscribe Processing
Great for Newsletters & Mass Mailings
Optional HTML & Text Composition
Integration with Google Features
Built in Spam Score Checking
Free Professional Templates - Feature Packed!

 

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
 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Several part series to implement Internet Explorer 11 Enterprise Mode
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

734 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