CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paige
Paige

Reputation: 7

Can I place two JavaScript scripts into one .js file?

So I have two <script>s.

From my understanding, I can place them into an external.js file by just copying and pasting the code.

I am creating a Google API:

<script>
  function initMap() {
    var uluru = {
      lat: -25.363,
      lng: 131.044
    };
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

I basically want to move both of these into a file called map.js. I moved the first script in as below:

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

And linking this new file and keeping the second script in the HTML format. It still worked. However, when I moved the second script into the file also:

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

  async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"

It didn’t work anymore. What did I do wrong?

Upvotes: 0

Views: 391

Answers (3)

Kirill Simonov
Kirill Simonov

Reputation: 8481

You cannot put them in the one file since <script async defer src="..."></script> is not an actual JS script, it just points to an external script file through the src attribute. In this case browser downloads this external script and executes it.

If you want to move this script to your map.js file, you have to download it. But in this particular case you shouldn't do this, because Google Maps Terms say:

No caching or storage. You will not pre-fetch, cache, index, or store any Content to be used outside the Service, except that you may store limited amounts of Content solely for the purpose of improving the performance of your Maps API Implementation due to network latency (and not for the purpose of preventing Google from accurately tracking usage), and only if such storage:

  • is temporary (and in no event more than 30 calendar days);

  • is secure;

  • does not manipulate or aggregate any part of the Content or Service;

  • and does not modify attribution in any way.

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

You can combine two inline scripts of the following format:

<script>
  function one() {
    // Something
  }
</script>

<script>
  function two() {
    // Something
  }
</script>

Into:

<script>
  function one() {
    // Something
  }

  function two() {
    // Something
  }
</script>

However, your second script:

<script async defer src="https://maps.googleapis.com/maps/api/js..."></script>

Is a reference to a script, and as such cannot be combined; a <script> tag cannot have both 'content' and an src attribute:

If a script element has a src attribute specified, it should not have a script embedded inside its tags.

If you really want to combine the scripts, you would need to download a local copy of the Google API and host the code yourself - then you can merge them into a single .js file which you load.

Note, however, that this wouldn't be preferable, as Google is hosting via their copy on a CDN, meaning that they're adding additional mechanics to the file to make it load faster.

Simply keep your two files separate and include both -- with the advent of HTTP/2 it's actually beneficial to split files up like this.

Upvotes: 1

DataCure
DataCure

Reputation: 425

Answer No

Reason one is an HTML call to include an external javascript file and your passing your API key thru for it to work.

What in effect you are doing is downloading the javascript file from Google to use on your website and if you was to enter https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap in the address bar and press enter, you will see an example of the javascript file it includes

Upvotes: 0

Related Questions