API_KEY

Use Google Maps to make unique and interactive applications.

A Beginner's Guide to the Google Maps API.png

google_maps.tar.gz

cluster_markers

Google Maps is one of the most utilized services in the world. Its APIs are among the best available for creating interactive digital maps. There’s a wide range of use cases for maps, including ride-hailing apps, looking up new restaurants, and even checking out the traffic situation on roads.

In this course, you’ll be introduced to two of Google Maps’s most utilized APIs: Embed Maps API and Maps JavaScript API. Through examples and code exercises, you will master key concepts of Google Maps development, including drawing, events, controls, and interactions.

By the end of this course, you’ll be ready to create impressive web applications with unique and interactive maps.

A Beginner's Guide to the Google Maps API

## The `search` map mode

The `search` mode displays the results of a search across a map. It requires the `q` parameter, which defines the search term. The base URL of this map mode looks like this: `https://www.google.com/maps/embed/v1/search?key=API_KEY&PARAMETERS`

### The `search` map mode parameters
We can use the following parameters in the `search` map mode:


align-center

### Code example
In the code example below, we run a search query in the request URL to display the locations of gyms across Seattle:


<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>Map Modes</title>
		<meta name="description" content="Integration of Maps Embed API">
		<meta name="author" content="Educative">
	</head>

	<body>
		<iframe
			src="https://www.google.com/maps/embed/v1/search?
					q=gyms+in+Seattle&
					key={{API_KEY}}"
			width="900"
			height="450"
			style="border:0"
			loading="lazy"
			allowfullscreen>
		</iframe>
	</body>
</html>

document.addEventListener("DOMContentLoaded", function () {
	pTag = document.querySelector("div");
	newVal = document.createElement("p");
	newVal.innerHTML = 'Hello, Hello';
	pTag.appendChild(newVal);
});

codemirror

console

In **lines 13–15** of the HTML file, we pass the value `gyms+in+Seattle` to the `q` parameter in the request URL. With this request, the Maps Embed API runs the search query and displays the map of Seattle with markers placed on each resulting gym location.

# The `search` map mode

The `search` mode displays the results of a search across a map. It requires the `q` parameter, which defines the search term. The base URL of this map mode looks like this: `https://www.google.com/maps/embed/v1/search?key=API_KEY&PARAMETERS`

## The `search` map mode parameters
We can use the following parameters in the `search` map mode:


## Code example
In the code example below, we run a search query in the request URL to display the locations of gyms across Seattle:


Learn how to use the search map mode on an embedded map.

Parameters	Category	Description
`q`	Required	This parameter defines the search term. It accepts plus codes or URL-encoded addresses as input.
`center`	Optional	This parameter sets the center of the map view. It accepts comma-separated latitude and longitude values.
`zoom`	Optional	This parameter sets the initial zoom level of the map view. It accepts integer values ranging from `0` to the maximum possible zoom value as input. The maximum possible zoom value varies depending on the location but is usually `21` with an individual building-level zoom. A zoom level of `0` provides a view of the whole earth.
`maptype`	Optional	This parameter defines which map type loads. It only accepts `roadmap` and `satellite` as possible map types.
`language`	Optional	This parameter defines the language for the UI elements and labels on the map. It accepts a two-character ccTLD region code as input.
`region`	Optional	This parameter defines the appropriate borders and labels to display, and tailors them according to the geopolitical sensitivities of a region. It accepts a two-character ccTLD region code as input.

Introduction

Maps Embed API and its Different Modes

Maps JS API Basics

Controls and Interactions

Events

Drawing on the Map

Conclusion

Appendix

The search Map Mode