API_KEY

Gain insights into Google Maps APIs, specifically Embed Maps and Maps JavaScript API. Learn about drawing, events, and controls to develop interactive web applications with engaging maps.

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

## Change the control position
To change the position of most controls on the map, we will modify the `position` property within the `MapOptions` object using `google.maps.ControlPosition`. Here's an example of position the zoom control to the top-center of the map:

```
new google.maps.Map(document.getElementById("map"), {
        ...
	zoomControlOptions: {
		position: google.maps.ControlPosition.TOP_CENTER,
	},
});
```

The `position` property doesn’t fix the location of the control. Instead, it intelligently positions the control around existing control elements.
### Supported control positions
The following control positions are supported by the Google Maps API:

align-center

### Code example
Here’s an example of a map with changes in the positions of the map type, zoom, and Street View controls:


<!DOCTYPE html>
<html>
	<head>
		<title>Event Click LatLng</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"), {
		zoom: 5,
		center: { lat: -22.906, lng: -43.173 }, // Coordinates of Rio de Janeiro, Brazil
		mapTypeControl: true,
		mapTypeControlOptions: {
			position: google.maps.ControlPosition.TOP_CENTER,
		},
		zoomControl: true,
		zoomControlOptions: {
			position: google.maps.ControlPosition.LEFT_CENTER,
		},
		streetViewControl: true,
		streetViewControlOptions: {
			position: google.maps.ControlPosition.LEFT_TOP,
		},
	});
}

#map {
	height: 100%;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

codemirror

console

In the JavaScript file above, we change the default positions of the `mapTypeControl`, `zoomControl`, `streetViewControl` controls in **lines 7**, **11**, and **15**, respectively.

# Change the control position
To change the position of most controls on the map, we will modify the `position` property within the `MapOptions` object using `google.maps.ControlPosition`. Here's an example of position the zoom control to the top-center of the map:

```
new google.maps.Map(document.getElementById("map"), {
        ...
	zoomControlOptions: {
		position: google.maps.ControlPosition.TOP_CENTER,
	},
});
```

The `position` property doesn’t fix the location of the control. Instead, it intelligently positions the control around existing control elements.
## Supported control positions
The following control positions are supported by the Google Maps API:

## Code example
Here’s an example of a map with changes in the positions of the map type, zoom, and Street View controls:


Learn how to change control element placement on the map.

Position Name	Description
`TOP_CENTER`	This property places the control towards the top-center of the map.
`TOP_LEFT`	This property places the control in the top-left section of the map, with sub-elements placed towards the top-center.
`TOP_RIGHT`	This property places the control in the top-right section of the map, with sub-elements placed towards the top-center.
`LEFT_TOP`	This property places the control in the top-left section of the map, with sub-elements placed below the top-left element.
`RIGHT_TOP`	This property places the control in the top-right section of the map, with sub-elements placed below the top-right element.
`LEFT_CENTER`	This property places the control at the left side of the map and is centered between the top-left and bottom-left control elements.
`RIGHT_CENTER`	This property places the control on the left side of the map and is centered between the top-right and bottom-right control elements.
`LEFT_BOTTOM`	This property places the control towards the bottom-left side of the map and above the bottom-left control elements.
`RIGHT_BOTTOM`	This property places the control towards the bottom-right side of the map and above the bottom-right control elements.
`BOTTOM_CENTER`	This property places the control towards the bottom-center of the map.
`BOTTOM_LEFT`	This property places the control towards the bottom-left section of the map, and the control’s sub-elements flow to the bottom-center element.
`BOTTOM_RIGHT`	This property places the control towards the bottom-right section of the map and the control’s sub-elements flow to the bottom-center element.

Introduction

Maps Embed API and its Different Modes

Maps JS API Basics

Controls and Interactions

Events

Drawing on the Map

Conclusion

Appendix

Control Positioning

Change the control position

Supported control positions

Code example