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

Pinpoint your location by adding flags to embedded Google Maps

Google Maps image of Manhattan

To insert a Google map with a location marker into your web page, you'll need to acquire a special software key from Google, and then add the relevant JavaScript into the page. Although the process is straightforward, it helps to have at least cursory background knowledge of HTML and JavaScript.

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.

  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.

If you believe you'll need to have the map displayed more often than your free quota allows, set up a billing arrangement with Google. Most websites—especially low-traffic blogs or niche sites—are unlikely to consume much of the quota allocation.

Insert the JavaScript Into Your Web Page

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

<div id="map"></div>
<script>
// 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});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

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.