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

The `streetview` mode displays Street View images as panoramic views from the specified locations–each panoramic view providing an interactive 360-degree view. The images have a 360-degree horizontal view and a 180-degree vertical view. The base URL of this map mode looks like this: 

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

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




align-center

### Code example

In the code example below, the street-level panorama imagery of the Statue of Liberty is displayed using the `streetview` map mode:


<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/streetview?
					location=40.689247,-74.0445025&
					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

We pass only the `location` parameter with the value `40.689247,-74.0445025` in **lines 13–15** of the request URL. This displays a panoramic street view image of the area around the Statue of Liberty.

# The `streetview` map mode

The `streetview` mode displays Street View images as panoramic views from the specified locations–each panoramic view providing an interactive 360-degree view. The images have a 360-degree horizontal view and a 180-degree vertical view. The base URL of this map mode looks like this: 

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

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




## Code example

In the code example below, the street-level panorama imagery of the Statue of Liberty is displayed using the `streetview` map mode:


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

Parameters	Category	Description
`location`	Required	This parameter specifies the location that the display of the panoramic photography will use. It accepts comma-separated latitude and longitude values as input.
`heading`	Optional	This parameter defines the compass heading of the camera in degrees clockwise from the North. It accepts a value between `-180°` and `360°` as input.
`pitch`	Optional	This parameter specifies the camera's angle (up or down) on the map. It accepts a value between `-90°` and `0°` as input.
`fov`	Optional	This parameter specifies the horizontal field of view of the image on the map. It accepts a value between `10°` and `100°` as input.
`center`	Optional	This parameter sets the center of the map view. It accepts comma-separated latitude and longitude values as input.
`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 streetview Map Mode