APIs and React

I used the Google Maps API for one of my two Blue Ocean assignments. To interface with the API I used a library to interface between the two. It allowed me to basically build react components that it then translated for the Maps API.

The primary reason that I used the library was because I didn't know how to insert the API script tag into the head of the html document. Perhaps I should have just done that - hardcode the tag right into our root index.html page. Perhaps I could have found a way to attach the tag dynamically.

That's what I'm writing about here.

So I've done a quick search and it looks like the answer is both A) Very easy to find and B) straightforward to implement.

This page of the API describes how to load the javascript API.

There are three different ways.

The one I was familiar with, and was circumspect about using -- **Inline Loading((:

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

Then there's Dynamic Loading (Manual):

// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.async = true;

// Attach your callback function to the `window` object
window.initMap = function() {
  // JS API is loaded and available
};

// Append the 'script' element to 'head'
document.head.appendChild(script);

There's the appending-to-head that I mentioned. I noticed a great passage here relating to async:

async: Asks the browser to asynchronously download and execute the script. When the script is executed, it will call the function specified using the callback parameter.

This makes async easy to understand. I also remember hearing this about async earlier in my coding education. How we drop .js scripts toward the end of the body when we want them to have reference to DOM elements that have loaded. Wait no, I think what I remember is that the script earlier in the body will gold up any following DOM elements until it loads. So the way I'm remembering and interpreting this passage is that you can use async to prevent that hold-up and allow the script to fire when it's ready without holding up the page render. Cool.

Finally, there the Dynamic Loading (Package):

npm install @googlemaps/js-api-loader

import { Loader } from "@googlemaps/js-api-loader"

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});
loader.load().then(() => {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

This looks super compatible with React. I'm not sure why I didn't apply this style off-the-bat with Blue Ocean. But I did find something that works, so it's no stress. And I have this now too -- even better. That's the thing about coding. There's a million ways to reach your goal and good reasons for for each of them. Sometimes that reason is it's the first one you found, ha.