codeup-web-exercises/mapbox_maps_api.html at main · emata10/codeup-web-exercises · GitHub

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Map Box</title>
	<!-- Mapbox CSS -->
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
	<script src="js/keys.js"></script>

	<!-- Custom CSS -->
	<style>
		#map {
			/* the width and height may be set to any size */
			width: 400px;
			height: 100%;
		}
	</style>
</head>
<body>

<h1>My First Mapbox Map!</h1>

<!-- The HTML element that serves as the Mapbox container -->
<div id='map' style='width: 400px; height: 300px;'></div>
<!-- Mapbox JS -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>

<!-- Mapbox Geocoder Util Methods -->
<script src="js/mapbox-geocoder-utils.js"></script>

	<script>
		mapboxgl.accessToken = myMapBoxKey;
	var map = new mapboxgl.Map({
			container: 'map',
			style: 'mapbox://styles/mapbox/streets-v9',
			zoom: 7,
	       center: [-106.486040, 31.768980],
		 })
	 	// mapboxgl.accessToken = myMapBoxKey;
	 	// var map = new mapboxgl.Map({
		// 	container: 'map',
		// 	style: 'mapbox://styles/mapbox/streets-v9',
		// 	zoom: 12,
		// 	center: [-105.9372, 35.6869]
		// });
        //     call the function to place the marker and popup
        //     placeMarkerAndPopup(
		// 			{
		// 				address: '7 W Gutierrez, Santa Fe, NM 87506',
		// 				popupHTML: '<h3>Sopaipilla Factory Restaurant</h3><p>Awesome Sopaipillas.</p>'
		// 		},
		// 		'myMapBoxKey',
		// 		map
		// );
		// 	var cafePopup = new mapboxgl.Popup()
		//          .setHTML("<p>L & J Cafe</p>")
		//          .addTo(map);
		//
		//      var cafeMarker = new mapboxgl.Marker()
		//          .setLngLat([-106.452580, 31.765310])
		//          .setPopup(cafePopup)
		//          .addTo(map);
		//
		// 	var sunsetPopup = new mapboxgl.Popup()
		// 		.setHTML("<p>The Kitchen</p>")
		// 		.addTo(map);
		//
		// 	var sunsetMarker = new mapboxgl.Marker()
		// 		.setLngLat([-106.247230, 31.802200])
		// 		.setPopup(sunsetPopup)
		// 		.addTo(map);
		//
		// 	var centralPopup = new mapboxgl.Popup()
		// 		.setHTML("<p>Cafe Central</p>")
		// 		.addTo(map);
		//
		// 	var centralMarker = new mapboxgl.Marker()
		// 		.setLngLat([-106.491370, 31.757890])
		// 		.setPopup(centralPopup)
		// 		.addTo(map);
		//
		// 	var favRestList = [
		// 		{
		// 			name: "L & J Cafe",
		// 			info: "Great Place too Eat!",
		// 			location: [-106.452580, 31.765310]
		// 		},
		// 		{
		// 			name: "The Kitchen",
		// 			info: "Great customer service.",
		// 			location: [-106.247230, 31.802200]
		// 		},
		// 		{
		// 			name: "Cafe Central",
		// 			info: "The best place ever.",
		// 			location: [-106.491370, 31.757890]
		// 		}
		//
		// 	];
		//
		// 	favRestList.forEach(function (restaurant)
		{


			new mapboxgl.Marker()
					.setLngLat(restaurant.location)
					.setPopup(new mapboxgl.Popup()
							.setHTML(`<h4>${restaurant.name}</h4><p>${restaurant.info}</p>`)
							.addTo(map));
			{

			}


			function placeMarkerAndPopup(info, token, map) {
				geocode("7 W Gutierrez, Santa Fe, NM 87506", myMapBoxKey).then(function (coordinates) {
					var popup = new mapboxgl.Popup()
							.setHTML(info.popupHTML);
					var marker = new mapboxgl.Marker()
							.setLngLat(coordinates)
							.addTo(map)
							.setPopup(popup)
							.popup.addTo(map);
				});


				// Add markers and info windows for each restaurant
				restaurants.forEach((restaurant) => {
					const marker = new google.maps.Marker({
						position: {lat: restaurant.lat, lng: restaurant.lng},
						map,
						title: restaurant.name,
					});

					const infowindow = new google.maps.InfoWindow({
						content: restaurant.description,
					});

					marker.addListener("click", () => {
						infowindow.open({
							anchor: marker,
						});
					});
				});
			}

		}


</script>
</body>
</html>