Using Google Maps API in a widget (Javascript module pattern) ...

283 views
Skip to first unread message

BD

unread,
Sep 7, 2011, 3:49:34 PM9/7/11
to google-map...@googlegroups.com
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:
 
It appears the google.maps object does not exist?   Any insights by the experts would be appreciated.
 
Thanks in advance.
 

BD

unread,
Sep 8, 2011, 11:16:53 PM9/8/11
to google-map...@googlegroups.com
Solution found after several trials (and plenty of errors)...
 
The "trick" is to include the callback parameter when injecting the google maps api into the head section of the document, ie:
 
 
In the javascript module, (expose) the callback function in a returned object and everything works like a charm.
 
 
 
 
Reply all
Reply to author
Forward
0 new messages