troubleshooting Question

Calling a function with an $.ajax load in Google Maps API v3

Avatar of tags266
tags266 asked on
AJAX
2 Comments1 Solution992 ViewsLast Modified:
I need to call the $("#tabs").tabs(); function during an Ajax call.  My Javascript is not loading when the Google Map InfoWindow opens.  I currently have this working in one scenario without using ajax.  

I am using an example with the 'domready' feature.

*** THIS WORKS ***
var contentString = [
      '<div id="tabs" style="font-size:11px;">',
      '<ul>',
        '<li><a href="#tab-1"><span>Overview</span></a></li>',
        '<li><a href="#tab-2"><span>Rates</span></a></li>',
      '</ul>',
      '<div id="tab-1">',
        '<p>Tab 1</p>',
      '</div>',
      '<div id="tab-2">',
       '<p>Tab 2</p>',
      '</div>',
      '</div>'
    ].join('');
	    
		// create an instance of the InfoWindow and add the div content above to it via the contentString
		var infowindow = new google.maps.InfoWindow({
			content:contentString,
			maxWidth:500
		});
		
		// this fires off the tabs via the domready when the div is loaded
		google.maps.event.addListener(infowindow, 'domready', function() {
		  $("#tabs").tabs();
		  
		});
	    
		// create the click event to open the window
		google.maps.event.addListener(marker,'click',function() {
			infowindow.open(mymap,marker);
		});
                

Now the only thing is I want to load data to the content of the InfoWindow via Ajax because I'm going to have dynamic text from a database populate it.  I won't be able to use that hacky .join function with the dynamic text.

So I rewrote it using Ajax, which brings in the correct code, BUT the javascript (dom) doesn't load.  I need to find a friendly way to do this similar to how I did it before with the 'domready' command.

*** THIS WORKS EXCEPT I don't have the tabs actually working since there is no JS.  Need to call that tabs() function via Ajax method ***

var infowindow = new google.maps.InfoWindow();
		
		google.maps.event.addListener(marker,'click', function() {
			
			load_content(mymap,this,infowindow);
		});
		
	
	}	
	
	function load_content(mymap,marker,infowindow){
	  $.ajax({
		  url: '/test.cfm',
		  success: function(data){
		  infowindow.setContent(data);
		  infowindow.open(mymap, marker);
		 }
		
	  });
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 2 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros