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 `place` map mode
The `place` map mode will display a map focused on a particular address or place. The Google Maps API will highlight the focused location in red or place a marker on it. Here’s the base URL of this map mode: 

`https://www.google.com/maps/embed/v1/place?key=API_KEY&PARAMETERS`



### The `place` map mode parameters
The table below lists parameters that we can use in the `place` map mode:


align-center

> **Note:** [Click here](https://www.educative.io/courses/google-maps-api-beginners/glossary) to learn more about specific items in this table including Plus Codes and ccTLDs.
### Code example
In the code example below, the `place` map mode displays a map marker at the Taj Mahal:


<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/place?
					q=Taj+Mahal,Agra+India&
					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 `q` parameter with the URL-escaped address `Taj+Mahal,Agra+India` to the request URL. This centers the map on the Taj Mahal and places a marker on it.

# The `place` map mode
The `place` map mode will display a map focused on a particular address or place. The Google Maps API will highlight the focused location in red or place a marker on it. Here’s the base URL of this map mode: 

`https://www.google.com/maps/embed/v1/place?key=API_KEY&PARAMETERS`



## The `place` map mode parameters
The table below lists parameters that we can use in the `place` map mode:


> **Note:** [Click here](https://www.educative.io/courses/google-maps-api-beginners/glossary) to learn more about specific items in this table including Plus Codes and ccTLDs.
## Code example
In the code example below, the `place` map mode displays a map marker at the Taj Mahal:


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

Parameters	Category	Description
`q`	Required	This parameter defines the location of the map marker. 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 place Map Mode