Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #18572

Re: How to include file in JS function

Show all headers | View raw

Bunyip wrote:
^^^^^^
Who?

> I am trying to include a file containing polygon data for a Google map
> in a JS function which loads the map. I've tried a few things found on
> various Googled sites including:
> =============================
> <script type="text/javascript">
>  function include(filename)
> {
> var head = document.getElementsByTagName('head')[0];
>    
> script = document.createElement('script');
> script.src = filename;
> script.type = 'text/javascript';
>    
> head.appendChild(script)
> }
> </script>
> 
> <script>
> function initialize() {
  ^^^^^^^^^^^^^^^^^^^^^
> var mapOptions = {
> zoom: 8,
> center: new google.maps.LatLng(38.70, -75.80618),
> mapTypeControl: true,
> mapTypeControlOptions: {
> style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
> },
> zoomControl: true,
> zoomControlOptions: {
> style: google.maps.ZoomControlStyle.LARGE
> },
> mapTypeId: google.maps.MapTypeId.ROADMAP
> };
> 
> var map = new google.maps.Map(document.getElementById('map_canvas'),
  ^^^^^^^
> mapOptions);
> include ('coords.js');
> }
> </script>
> </head>
> <body onload="initialize()">
> <div id="map_canvas"></div>
> </body>
> ===========================
> coords.js conatins:
> var ZipCoordinates14 = [
> new google.maps.LatLng(39.721448436441, -76.177407691101),
> new google.maps.LatLng(39.721498081776, -76.158070551061),
> new google.maps.LatLng(39.721639384602, -76.10303229774),
> etc.
> new google.maps.LatLng(39.721448436441, -76.177407691101)
> ];
> var ZipPolygon = new google.maps.Polyline({
> path: ZipCoordinates14,
> strokeColor: '#FF0000',
> strokeOpacity: 1.0,
> strokeWeight: 1
> });

You might want to consider

  var maps = google.maps;

and

  new maps.…(…);

which would skip at least one scope chain resolution step per invocation.  
Or, if it works (which it should with proper namespacing),

  var LatLng = google.maps.LatLng;

etc. and

  new LatLng(…)

etc.

> ZipPolygon.setMap(map);
> ===========================
> It works when the contents of coords.js are in the initialize()
> function but not when I try to include it as a separate file. I get
> just the map but without the polygon overlay.
> 
> How can I do this include?

Since you are using Google Maps and the map is loading, that approach of 
dynamically loading scripts (which is otherwise questionable) is basically 
OK as Google Maps uses it itself.  (Although there may be the document.head 
shorthand property and the backwards-compatible document.body property 
should suffice.)

The error message that you are getting in your script console when include() 
is called should be something like “ReferenceError: map is not defined”.  
Use a debugger and set breakpoints to be sure.

“map” currently is the name of a variable declared *local* to initialize().  
However, it needs to be the name a *globally available* property (such as a 
global variable) if code in the global execution context (such as in 
coords.js) is to access it.  That is, you only need to *initialize* the 
property value in initialize(), and declare/define the property elsewhere.

As an alternative, you can split Polyline data and instantiation and pass 
the value of “map” as an argument to a function, unless you want the 
Polyline instantiation happening in initialize() directly.

Are you using Valid markup?

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

How to include file in JS function Bunyip <bunyip@koalanet.com.au> - 2013-02-18 10:58 +1000
  Re: How to include file in JS function Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-02-19 13:22 +0100
  Re: How to include file in JS function Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-02-19 15:45 +0000

csiph-web