Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-01-31
13
Medium Priority
?
738 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
Stressed Out?

Watch some penguins on the livecam!

 

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 2000 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

715 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