Google Maps:
To access the Google Maps API, you need a billing account and a Google account. Then, you need to get the
API key.
Once your site is live, make sure to restrict access to the key
Once you have the key, you can then insert it into your HTML page, within <script> tags
In the script there are two words before the src="" reference:
async:
Loads the scripts at the same time as the HTML is loading, and then there's just a brief pause while the script is executed.
defer:
Waits until the page has finished loading before the <script&ht is executed.
Loading these in the top <head> element increases page load time for these scripts. When loading in the <head> element,
use defer. That is what we have done on this page.
At the end of the script is:
&callback=initMap:
This is a reference to a callback function() that needs to be created. We shall do that soon.
First, however, we need to select our API from the many choices Google offers. We can do this here. For this project, we shall use the Maps JavaScript API and from the side bar, we shall choose Marker Clustering, as this one requires an additinal script to be inserted:
Again, this script has been inserted into the <head> element.
Now, all we have to do in our HTML is to create the following:
Now we style the element in the CSS file:
And from here, we can follow the Google documentation.