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

Groups > comp.lang.javascript > #18533 > unrolled thread

How to include file in JS function

Back to article view | Back to comp.lang.javascript

Contents

  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

#18533 — How to include file in JS function

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
});
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?

TIA

Bunyip

[toc] | [next] | [standalone]

#18572

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.

[toc] | [prev] | [next] | [standalone]

#18575

In comp.lang.javascript message <j4v2i85it54jr2pldd996ktn7sakrr3fr8@4ax.
com>, Mon, 18 Feb 2013 10:58:41, Bunyip <bunyip@koalanet.com.au> posted:

>
>How can I do this include?
>

One way is to load the same-domain data file into an iframe and read the
contents of that : it works for me.

-- 
 (c) John Stockton, nr London UK               Reply address via Home Page.
   news:comp.lang.javascript FAQ <http://www.jibbering.com/faq/index.html>.
   <http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
   <http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web