Google Maps JavaScript API Tutorial - 1 - Basic API Overview

Now that we have setup our Google Maps JavaScript API Key, lets begin building our web app. First let's start with allowing our app to display the map by calling the google maps API. Create an index.html in your desired folder that will be your webpage. To call the API, we use a html script tag:

<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&amp;v=3&amp;callback=initMap" async="" defer="defer"></script>

Now that we have called the API we need to show the map on our html page and define our initMap function.

<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.7413594, lng: -73.9980244},
zoom: 13
});
}
</script>

Now our map is good to go. Test out your web application by navigating to your html file in your file explorer and opening it in your browser. For the full code of this tutorial please visit here.