0

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?

Improve this question
3
  • 1
    The second 'script' is not a piece of Javascript but part of the <script> tag. Commented Feb 26, 2018 at 0:02
  • So if I was wanting to move that part into the map.js file to keep it all in one isolated place, is that still possible? If so, how? Commented Feb 26, 2018 at 0:05
  • You would need to download the https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap and include that in your external script, but I wouldn't do that, it is on a content delivery network, and that's fine. Commented Feb 26, 2018 at 0:06

3 Answers 3

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

Comments

0

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.

Improve this answer

2 Comments

Hi, does this mean that I can't put the first script in my own .js file anyway? I dont really understand what that means!
@Paige No, you can put your first script to your own js file, as well as any other script that contains js code. But your second script has no js code inside, it has only a reference to external code. To include this external code in your file, you need to open the src link, copy all code and paste it to your file instead of copying just async defer src="..."

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.