function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
center: {
lat: 37.7893719,
lng: -122.3942,
},
zoom: 16,
heading: 320,
tilt: 47.5,
mapId: "90f87356969d889c",
}
);
const buttons: [string, string, number, google.maps.ControlPosition][] = [
["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
];
buttons.forEach(([text, mode, amount, position]) => {
const controlDiv = document.createElement("div");
const controlUI = document.createElement("button");
controlUI.classList.add("ui-button");
controlUI.innerText = `${text}`;
controlUI.addEventListener("click", () => {
adjustMap(mode, amount);
});
controlDiv.appendChild(controlUI);
map.controls[position].push(controlDiv);
});
const adjustMap = function (mode: string, amount: number) {
switch (mode) {
case "tilt":
map.setTilt(map.getTilt()! + amount);
break;
case "rotate":
map.setHeading(map.getHeading()! + amount);
break;
default:
break;
}
};
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;Note: Read the guide on using TypeScript and Google Maps. JavaScript
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 37.7893719,
lng: -122.3942,
},
zoom: 16,
heading: 320,
tilt: 47.5,
mapId: "90f87356969d889c",
});
const buttons = [
["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
];
buttons.forEach(([text, mode, amount, position]) => {
const controlDiv = document.createElement("div");
const controlUI = document.createElement("button");
controlUI.classList.add("ui-button");
controlUI.innerText = `${text}`;
controlUI.addEventListener("click", () => {
adjustMap(mode, amount);
});
controlDiv.appendChild(controlUI);
map.controls[position].push(controlDiv);
});
const adjustMap = function (mode, amount) {
switch (mode) {
case "tilt":
map.setTilt(map.getTilt() + amount);
break;
case "rotate":
map.setHeading(map.getHeading() + amount);
break;
default:
break;
}
};
}
window.initMap = initMap;Note: The JavaScript is compiled from the TypeScript snippet. CSS
/*
* 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;
}
.ui-button {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
height: 40px;
cursor: pointer;
}
.ui-button:hover {
background: rgb(235, 235, 235);
}
HTML
<html>
<head>
<title>Tilt and Rotation</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4