Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1

Afficher un Street View dans Google Maps

Tutoriel publié le 27 Novembre 2011 Mis à jour le 24 Janvier 2012

Cette fonction vous permet d'afficher un streetview Google Maps

setStreetView

Cette fonction vous permet d'afficher un street view dans une balise <div/>

Paramètres spécifiques :

id <chaîne> Id de la balise <div/> dans laquelle sera affiché le street view

Résultat du callback : StreetViewPanorama

 
var tours = [47.390346,0.688974];
$('#maCarte').gmap3(
	{
		action:'init', 
		zoom: 14, 
		mapTypeId: google.maps.MapTypeId.ROADMAP, 
		streetViewControl: true, 
		center: tours 
	},  
	{
		action:'setStreetView',
		id: 'monStreetview',
		options:{
			position: tours,
			pov: {
				heading: 34,
				pitch: 10,
				zoom: 1
			}
		}
	}
);

Carte avec setStreetView : Exemple I

Code complet avec setStreetView : Exemple I

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8"/>
		<title>Votre titre de page</title>
		<style type="text/css">
			html{height:100%}
			body{height:100%;margin:0px;padding:0px}
			#maCarte{height: 50%;}
			#monStreetview{height: 49%;}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
		<script type="text/javascript"> 
			$(function(){
				var tours = [47.390346,0.688974];
				$('#maCarte').gmap3(
					{
						action:'init', 
						zoom: 14, 
						mapTypeId: google.maps.MapTypeId.ROADMAP, 
						streetViewControl: true, 
						center: tours 
					},  
					{
						action:'setStreetView',
						id: 'monStreetview',
						options:{
							position: tours,
							pov: {
								heading: 34,
								pitch: 10,
								zoom: 1
							}
						}
					}
				);
			});
		</script>
	</head>
	
	<body>
		<div id="maCarte"></div>
		<div id="monStreetview"></div>
	</body>
</html>

BOUTON POUR ALTERNER CARTE ET STREETVIEW

Exemple : bouton permettant d'alterner l'affichage entre la carte et le streetview

$('#maCarte').gmap3(
	{
		action:'init',
		zoom: 18,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		streetViewControl: false,
		center: [47.390346,0.688974]
	}
);

$('#bouton-alterner').click(function(){
	$('#maCarte').gmap3(
		{
			action:'getStreetView',
			callback:function(panorama){
				var visible = panorama.getVisible();
				if (visible) {
					panorama.setVisible(false);
				} else {
					var map = $(this).gmap3('get');
					panorama.setPosition(map.getCenter());
					panorama.setPov({
						heading: 265,
						zoom:1,
						pitch:0
					});
					panorama.setVisible(true);
				}
			}
		}
	);
});

Carte avec setStreetView : Exemple II

Code complet avec setStreetView : Exemple II

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8"/>
		<title>Votre titre de page</title>
		<style type="text/css">
			html{height:100%}
			body{height:100%;margin:0px;padding:0px}
			#maCarte{height: 100%;}
		</style>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
		<script type="text/javascript"> 
			$(function(){
				$('#maCarte').gmap3(
					{
						action:'init',
						zoom: 18,
						mapTypeId: google.maps.MapTypeId.ROADMAP,
						streetViewControl: false,
						center: [47.390346,0.688974]
					}
				);
				
				$('#bouton-alterner').click(function(){
					$('#maCarte').gmap3(
						{
							action:'getStreetView',
							callback:function(panorama){
								var visible = panorama.getVisible();
								if (visible) {
									panorama.setVisible(false);
								} else {
									var map = $(this).gmap3('get');
									panorama.setPosition(map.getCenter());
									panorama.setPov({
									heading: 265,
									zoom:1,
									pitch:0});
									panorama.setVisible(true);
								}
							}
						}
					);
				});
			});
		</script>
	</head>
	
	<body>
		<input type="button" id="bouton-alterner" value="Alterner : Carte <-> StreetView">
		<div id="maCarte"></div>
	</body>
</html>

GMap3 Plugin JQuery

setStreetView gmap3

Google Maps API & Google Web Services