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 `view` map mode

The `view` mode will display a map with no markers or directions. It won’t focus on any one place in particular. The base URL of this map mode looks like this: 

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

Unlike the `place` mode, the view mode requires the `center` parameter, which accepts comma-separated latitude and longitude values. For example, the values `40.689247,-74.0445025` refer to the Statue of Liberty.


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

align-center

 ### Code example
In the code example below, the `view` map mode is used to display a map of the Statue of Liberty. The required `center` parameter defines the center of the map view.

<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/view?
					center=40.689247,-74.044502&
					zoom=18&
					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-16** of the HTML file, we assign the `center` parameter with the coordinates of the Statue of Liberty, `40.689247,-74.044502`, and pass `18` to the `zoom` parameter. That leads to a close-up of the monument with no markers or directions.

# The `view` map mode

The `view` mode will display a map with no markers or directions. It won’t focus on any one place in particular. The base URL of this map mode looks like this: 

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

Unlike the `place` mode, the view mode requires the `center` parameter, which accepts comma-separated latitude and longitude values. For example, the values `40.689247,-74.0445025` refer to the Statue of Liberty.


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

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

Parameters	Category	Description
`center`	Required	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 view Map Mode

The `view` map mode

The `view` map mode parameters

Code example