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

## Rotated 45° imagery
The `satellite` and `hybrid` map types also feature 45° imagery support. This is only available on `zoom` levels greater than `12`. This high-resolution imagery provides perspective views towards any of the four principal compass directions.


When a user zooms onto a particular map section, the rotate control becomes visible, and a 45° perspective imagery replaces default imagery. 

We can adjust 45° imagery behavior by adjusting the `zoom` level and the tilt level:
- At `zoom` levels between `12` and `18`, the 0° base map is displayed by default unless the `tilt` value is set to 45°.
- At `zoom` levels greater than `18`, the 45° base map is displayed by default unless the `tilt` value is set to 0°.

We can enable 45° imagery by setting `tilt` to 45°, like this:
```JS
map.setTilt(45);
``` 
We can disable 45° imagery by setting `tilt` to 0°, like this:
```JS
map.setTilt(0);
```

### Code example
Here’s an example of a map on which 45° imagery is enabled:

<html>
	<head>
		<title>45 Tilt Imagery</title>
		<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
	</head>
	<body>
		<div id="map"></div>

		<script
			src="https://maps.googleapis.com/maps/api/js?
					callback=initMap&
					v=weekly&
					key={{API_KEY}}"
			async
		></script>
	</body>
</html>

function initMap() {
	const map = new google.maps.Map(document.getElementById("map"), {
		center: { lat: 40.76, lng: -73.983 }, // Coordinates of New York City
		zoom: 15,
		mapTypeId: "satellite",
	});

	map.setTilt(45);
}

/* Always set the map height explicitly to define the size of the div
   element that contains the map. */
#map {
	height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

codemirror

In the above code widget, we enable 45° tilted satellite imagery on the map by setting the `tilt` to `45` on **line 8**.

# Rotated 45° imagery
The `satellite` and `hybrid` map types also feature 45° imagery support. This is only available on `zoom` levels greater than `12`. This high-resolution imagery provides perspective views towards any of the four principal compass directions.


When a user zooms onto a particular map section, the rotate control becomes visible, and a 45° perspective imagery replaces default imagery. 

We can adjust 45° imagery behavior by adjusting the `zoom` level and the tilt level:
- At `zoom` levels between `12` and `18`, the 0° base map is displayed by default unless the `tilt` value is set to 45°.
- At `zoom` levels greater than `18`, the 45° base map is displayed by default unless the `tilt` value is set to 0°.

We can enable 45° imagery by setting `tilt` to 45°, like this:
```JS
map.setTilt(45);
``` 
We can disable 45° imagery by setting `tilt` to 0°, like this:
```JS
map.setTilt(0);
```

## Code example
Here’s an example of a map on which 45° imagery is enabled:

Learn how to enable tilted 45° imagery support on certain map types.

Introduction

Maps Embed API and its Different Modes

Maps JS API Basics

Controls and Interactions

Events

Drawing on the Map

Conclusion

Appendix

Tilted Map View

Rotated 45° imagery

Code example