-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjs.html
executable file
·100 lines (85 loc) · 2.84 KB
/
js.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!--
https://developers.google.com/maps/get-started
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="map"></div>
<br/>
<form action="javascript:void(0)">
<label for="pac-input">Search</label>
<input type="text" id="pac-input">
<!-- <button id="more">Search</button> -->
</form>
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
const uluru = {
lat: -25.344,
lng: 131.031
};
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
// PLACES
// const center = {
// lat: 50.064192,
// lng: -130.605469
// };
// // Create a bounding box with sides ~10km away from the center point
// const defaultBounds = {
// north: center.lat + 0.1,
// south: center.lat - 0.1,
// east: center.lng + 0.1,
// west: center.lng - 0.1,
// };
const input = document.getElementById("pac-input");
const options = {
// bounds: defaultBounds,
componentRestrictions: {
country: "us"
},
fields: ["address_components", "geometry", "icon", "name"],
strictBounds: false,
// types: ["establishment"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);
// Binding to allow the map to be changed
autocomplete.bindTo("bounds", map);
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
map.setCenter(place.geometry.location);
map.setZoom(17);
});
}
window.initMap = initMap;
</script>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px;
/* The height is 400 pixels */
width: 100%;
/* The width is the width of the web page */
}
</style>
<script>
</script>
</body>
</html>