exemples-javascript/streetview.html at master · eracom/exemples-javascript · 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
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Google Streetview</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

        <style>

            html {
		        height: 100%;
		        margin: 0;
		        padding: 0;
		        font-family: 'Work Sans', sans-serif;
		        background: white;
		    }

		    body {
		    	padding: 5vh 0vw;
		    }

		    #map, #pano {
		        float: left;
		        height: 50vh;
		        width: 50%;
		        background: beige;
		    }

		    #infos {
				max-width: 30em;
				padding: 2em;
				clear: both;
		    }

        </style>
    </head>
    <body>

        <div id="map"></div>
    	<div id="pano"></div>

		<div id="infos">
			<h1>NOTE:</h1>
			<p>
		      Ce code provient d'un exemple
		      <a href="https://developers.google.com/maps/documentation/javascript/examples/streetview-simple?hl=fr">fourni par Google</a>.
		     </p>

		    <p>La partie YOUR_API_KEY doit être remplacée par un code personnel.
		      C'est une méthode utilisée par Google pour contrôler l'accès à ses services
		      et prévenir des usages abusifs (trop grand nombre de connexions).

		    <p>Voici l'endroit où vous pouvez créer une clé API pour Streetview:
		      <a href="https://console.developers.google.com/">https://console.developers.google.com/</a>

		    <ul>
		    	<li>Aller sous <i>API Manager > Credentials</i>.</li>
		      	<li>Vous devrez commencer par créer un "Project".</li>
		      	<li>Ensuite vous pourrez créer un "API Key".</li>
		      	<li>Une fois créé, il faut activer les API souhaitées.</li>
		      	<li>Pour cet exemple, c'est la "Google Maps Embed API".</li>
			</p>
		</div>

		<script>

	      function initialize() {
	        var lieu = {lat: 46.5172535, lng: 6.6300838};

	        var map = new google.maps.Map(document.getElementById('map'), {
	          center: lieu,
	          zoom: 14
	        });

	        var panorama = new google.maps.StreetViewPanorama(
	            document.getElementById('pano'), {
	              position: lieu,
	              pov: {
	                heading: 34,
	                pitch: 10
	              }
	            });
	        map.setStreetView(panorama);
	      }

	      // API Key: AIzaSyBAQbFt-Khy7H0wQVR_Jtn5UwI8SsItvHU

	    </script>
	    <script async defer
	        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDDsL3UEVymsD14lFQxOGVHRZuBC17yyBI&callback=initialize">
	    </script>
    </body>
</html>