Hello, A brief description of the task: Load the Google Maps JavaScript API V3 dynamically using the JavaScript module pattern so that ANY html page can include our JavaScript widget and have a google map displayed within it.
Below is a first attempt at the code used so far. The HTML page is as follows: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd";> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Javascript module patter with Google maps test</title> </head> <body> <script type="text/javascript" src="widget.js"></script> </body> </html> The above page includes the javascript file "widget.js". widget.js is responsible for adding the Google Maps API to the head section of the document. Once the maps api is loaded the widget can then use the api internally to display a map on the page (remember, the idea is to allow other sites to simply include one line of javascript and have the widget display a map; so please, resist the temptation to reply to include the api in the HTML head section). Below is the code for widget.js (using javascript module pattern): var test = ( function() { /* *--------------------------------------------------------------------- * private function to be called when map api is loaded ... *--------------------------------------------------------------------- */ function map_loaded() { var p; alert( "Attempt to create map point ..." ); try { p = new google.maps.LatLng( 53.5171022, -113.5104551 ); alert( "map point created successfully!!" ); } catch( e ) { alert( "map_loaded(): " + e.toString() ); } } /* *--------------------------------------------------------------------- * Inject google maps api script into the page and call our callback * function when loaded ... *--------------------------------------------------------------------- */ function map_script_inject() { var script_tag; script_tag = document.createElement( "script" ); script_tag.type = "text/javascript"; script_tag.src = " http://maps.googleapis.com/maps/api/js?v=3.5&libraries=places&sensor=false";; script_tag.onload = "test.map_callback"; /* * Same as above (.onload), but for IE ... */ script_tag.onreadystatechange = function() { if ( this.readyState == "complete" || this.readyState == "loaded" ) { map_loaded(); } }; ( document.getElementsByTagName( "head" )[0] || document.documentElement ).appendChild( script_tag ); } /* * Inject the script into the page ... */ map_script_inject(); /* * Return an object with our call back function exposed ... */ return { map_callback : function() { map_loaded(); } } })(); Now, when the HTML page is loaded into the browser and inspecting the source (with IE developer tools), we see the Maps api script is injected into the page as follows: <script src=" http://maps.googleapis.com/maps/api/js?v=3.5&libraries=places&sensor=false"; type="text/javascript" onload="test.map_callback"></script> All is good, the first alert displayed is "Attempt to create map point ...", which is expected and indicates our callback was called succesfully. However, following the next few lines of code in the callback to create a map point the next alert displayed is: "map_loaded: TypeError: ObjectExpected". Using FireFox - nothing happens, but the error console reports the following: Error: Rc.google is undefined Source File: http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/5/14a/%7Bmain,places%7D.js Line: 25 It appears the google.maps object does not exist? Any insights by the experts would be appreciated. Thanks in advance. -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/3U0MRquKdycJ. 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-js-api-v3?hl=en.
