Shane, that script loading code that Mike posted isn't what you want. (Sorry, Mike!)
At the moment, you have a separate and complete HTML page like this one: http://illustriousworks.ie/files/whosgiggin/red_listing.html and you're trying to load its content into a DIV in your current document. This is kind of a mix of two different techniques and it's not going to work. The easiest thing for you may be to get that red_listing.html page and other similar pages working as standalone pages. This doesn't require any fancy dynamic loading of scripts, just ordinary Maps API code which you almost have done - one minor problem being that I don't see where the page loads the Maps API at all. Then where you try to do a .load() in your main page to load this .html file into a DIV, instead create an IFRAME element with its src attribute pointing to red_listing.html, and insert that IFRAME into the DIV. You can use ordinary jQuery code to do this. One disadvantage of this is slow performance when you click from venue to venue in your main list. You'd be loading a new page with its own copy of the Maps API each time. So it would be better to have all the code to display these maps in your main page. You don't need separate code for each map; one common JavaScript function can do them all. You should be using common functions a lot more. It looks like you are generating your page from a server script? Instead of generating repeated chunks of JavaScript code, you should write a function in JavaScript and then have your server script generate repeated calls to that function with only the parameters that change. An example is the code that does the slideUp/load/slideDown sequence for each listing click. For your venues, one good approach might be to have a small JSON data download for each venue. Your click code would download that file and then call a common function that uses that data (lat/long, etc.) and initializes a map in the appropriate DIV. This does not require any asynchronous loading of the Maps API, unless you want to defer loading the API until you actually display a map. Even then, you wouldn't want to roll your own asynchronous loading code, you'd simply use the google.load() function as described here: http://code.google.com/apis/ajax/documentation/#Dynamic Note the use of the callback function - it is called after the API is loaded. -Mike On Tue, Aug 10, 2010 at 12:29 PM, ShaneMcC <[email protected]> wrote: > Just getting back to this now, > Hi Mike, I really appreciate the help! > > So I put the function in the header of the parent document. > And addScript(''somejavascript.js'); in the link to the root document? > > I assume something like an onclick="addScript('somejavascript.js');" > in the href which loads in the external file? > > > Thanks Mike!! > Shane > > > > On Aug 7, 11:09 pm, Mike <[email protected]> wrote: > > You'll need to load the API Javascript as a separate file. A few > > browsers may allow Javascript to be loaded into a div on the fly, but > > most don't. So you'll need to insert the Javascript as a new Script > > element into your document. > > > > I created a function to do that in my code: > > > > function addScript(url) { > > var scrpt = document.getElementById(url); > > if (scrpt == null) { > > //If script is not already added, add it > > var headID = document.getElementsByTagName("head")[0]; > > var newScript = document.createElement('script'); > > newScript.type = 'text/javascript'; > > newScript.src = url; > > newScript.id = newScript.src; > > headID.appendChild(newScript); > > } > > > > } > > > > I call it like this: > > addScript(''somejavascript.js'); > > > > (just substitute the actual Javascript you want to load) > > > > That will let you load in javascript files on the fly into your > > header. My function also tests to see if the script has already been > > loaded into the document, and if so, it won't reload it. > > > > I hope that helps you out. > > > > -Mike Ethetton > > Master Toolworks, LLC > > > > P.S. If anyone knows somebody looking for a developer/consultant, I'm > > in need of the work right now. Drop me a line. Thanks! > > > > On Aug 7, 11:15 am, ShaneMcC <[email protected]> wrote: > > > > > > > > > > > > > > > > > Hi Guys, > > > I have a webpage, on which are a bunch of listings, the user clicks a > > > listing and the information loads in a div which has a small map. > > > > > How can I initiate the map when it is loaded in?, I've no experience > > > loading a map via ajax. > > > > > You can have a look at the code here; > http://illustriousworks.ie/files/whosgiggin/whosgiggin.html > > > > > Thanks. > > > Shane > > -- > You received this message because you are subscribed to the Google Groups > "Google Maps API" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]<google-maps-api%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/google-maps-api?hl=en. > > -- You received this message because you are subscribed to the Google Groups "Google Maps API" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-api?hl=en.
