How to Add a Google Map to a Web Page With API

This article explains how to insert a Google map with a location marker into your web page. This process includes getting a special software key from Google and then adding the relevant JavaScript to the page.

Obtain a Google Maps API Key

To protect its servers from being bombarded by requests for maps and location look-ups, Google throttles access to its Maps database. You must register with Google as a developer to obtain a unique key to use the Application Programming Interface to request data from the Maps servers. The API key is free unless you need heavy-duty access to Google's servers (for example, to develop a web app).

To register your API key:

1. Go to the Google Cloud Platform Console and, after logging in with your Google account, either create a new project or select an existing one.

   Read More

   How to Create and Use External JavaScript Files

   By Stephen Chapman

2. Click Continue to enable the API and any related services.

3. On the Credentials page, get an API key. As necessary, set relevant restrictions on the key.

4. Secure your API key using best practices recommended by Google.

Insert the JavaScript Into Your Web Page

Insert the following code into your Web page, in the BODY section of the HTML document:

// Initialize and add the map function initMap() {
// The location of flag var flag = {lat: XXX, lng: YYY};
// The map, centered at flag var map = new google.maps.Map( document.getElementById('map'), {zoom: 4, center: flag});
// The marker, positioned at flag var marker = new google.maps.Marker({position: flag, map: map}); } src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

In this code, change the following:

• Replace flag with a name that references the location you're pinning. Keep it simple and short (like home or office or paris or detroit). You can run this code leaving flag as-is, but changing the name supports re-use of this code on the same page, to embed several different maps.
• Replace XXX and YYY with the latitude and longitude, in decimals, of the location of the map's marker. You must replace these values for the map to display properly. An easy way to find the latitude and longitude is to open Google Maps and right-click on the precise location you intend to flag. In the context menu, select What's here? to view the latitude and longitude. 
• Replace YOUR_API_KEY with the API key you obtained from Google. Do not put spaces between the equals sign and the ampersand. Without the key, the query will fail and the map will not display properly.

Optimal Practices

In the head of your HTML document, specify CSS constraints for the map, including sizing, colors, and page placement.

Google's map script contains attributes like zoom and center that are open to end-user modification. This more advanced technique is supported through Google's developer documentation.

A Google Maps API is a valuable asset. Google's best-practice instructions offer excellent advice for securing the key against misuse by others. Proper security is especially relevant if you've set up a payment system for API access, as you could face a steep bill if your credentials are stolen. In particular, the example we've shown here does embed the API key directly into the code—we've done this for the purpose of demonstrating the procedure. In a production environment, however, it's better to specify environment variables for the key instead of inserting the key directly.