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.

Google Maps JavaScript API Tutorial - Setup

The Google Maps Javascript API is a powerful set of tools that can be called to build your very own web mapping application. The very first thing you will need to do is to setup your own Google Developer Project. ### Setup 1. On your browser, visit https://console.developers.google.com. 2. Next sign in with your existing gmail account. (If you don't have one, please create one here.) 3. Click on Select a project and then click on Create a project in the drop down menu. 4. Enter a creative project name and read and agree to the terms of service. 5. Click Create. 6. You will need to enable the following APIs under Google Maps APIs by clicking and enabling each of them.

• Google Maps Javascript API
• Google Maps Roads API
• Google Static Maps API
• Google Street View Image API
• Google Places API Web Service
• Google Maps Geocoding API
• Google Maps Directions API
• Google Maps Distance Matrix API
• Google Maps Geolocation API
• Google Maps Elevation API
• Google Maps Time Zone API

7. Click the Credentials menu item on the left of the screen 8. Click Create Credentials 9. Select API Key and select Browser Key. 10. Name your API Key and click create 11. Let's start mapping. In the next tutorial, we will be talking about basic techniques to access the Google maps JavaScript API to start off our web application.

Google Maps JavaScript API Tutorial - 2 - Markers

Now that we have our map up and running lets play around with saving different points on our map. In the Google Maps API, these points are called markers.
In order, to set a fixed marker on our map we must first get the position/location in lat/long.

var tribeca = {lat: 40.719526, lng: -74.0089934};

Now that we have saved our location in a variable called tribeca, let's create our marker.

var marker = new google.maps.Marker({
  position: tribeca,
  map: map,
  title: 'My Marker!'
});

Now if we run our html file on our browser, we see our newly placed marker.

To view the full code, please visit here.
Stay tuned for the next lesson: Marker Infowindows