InfoWindow et streetview

**pc75** · 29/08/2014, 14h26

Bonjour,

Je génère dynamiquement une page dont voilà le résultat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
<HTML>
<HEAD>
 
<style type="text/css"> 
	div.conteneur-parent {
	    height: 800px;
	}
 
	#map-canvas {
		height : 730px;
		width : 1000px;
		width : 100%;
		margin: 0 auto;
		margin-right: auto;
		border : 1px solid #888;
	}
</style>
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr"> 
</script>
 
<script type="text/javascript"> 
var map;
var infoBulle = new google.maps.InfoWindow();
// initialisation de la carte Google Map de départ
function initialiserCarte()
{
	// Latitude et longitude du centre de Paris pour centrer la carte de départ
	var latlng = new google.maps.LatLng(48.8590519, 2.33254949999998);
	var mapOptions = {
		zoom      : 13,
		center    : latlng,
		mapTypeId : google.maps.MapTypeId.ROADMAP
		};
 
	// map-canvas est le conteneur HTML de la carte Google Map
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
	TrouverAdresse();
 
}
 
function TrouverAdresse()
{
	var nbadresses = document.getElementById('nbadresses').value;
	// Lecture du tableau des adresses
	for (var i = 1; i <= nbadresses; i++)
		{
		var nom = document.getElementById('nom' + i).value;
		var adresse = document.getElementById('adresse' + i).value;
		var latitude = document.getElementById('latitude' + i).value;
		var longitude = document.getElementById('longitude' + i).value;
 
		latitude = parseFloat(latitude);
		longitude = parseFloat(longitude);
		imgMarker = 'images/green-dot.png';
 
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(latitude, longitude),
		    map: map,
		    icon: imgMarker,
		    height: 25,
		    width: 25,
		    title: nom + '\n' + adresse.replace('<br>', ' ')
		  });
 
		contenu = adresse;
		bindInfoWindow(marker, contenu);
 
		}
}
 
function bindInfoWindow(marqueur, info)
{
    google.maps.event.addListener(marqueur, 'domready', function() {
        infoBulle.setContent(info);
        infoBulle.open(map, marqueur);
    });
}
 
// Lancement de la construction de la carte google map
google.maps.event.addDomListener(window, 'load', initialiserCarte);
</script>
 
<title>
</title>
</HEAD>
<body bgcolor="#ECF4FF">
 
<form name="frmMap" method="post">
 
<div class="conteneur-parent">
<div id="map-canvas" class="map-canvas"></div>
</div>
 
		<input type="hidden" id="adresse1" value="43 rue Etienne Marcel<br>75001 PARIS">
		<input type="hidden" id="nom1" value="La Poste Louvre (jusque fin 2014)">
		<input type="hidden" id="latitude1" value="48.8649526">
		<input type="hidden" id="longitude1" value="2.3444405">
 
		<input type="hidden" id="adresse2" value="48 rue de Sévigné<br>75003 PARIS">
		<input type="hidden" id="nom2" value="SEVIGNE">
		<input type="hidden" id="latitude2" value="48.8576848">
		<input type="hidden" id="longitude2" value="2.3638576">
 
		<input type="hidden" id="adresse3" value="4 place du Louvre<br>75001 PARIS">
		<input type="hidden" id="nom3" value="LOUVRE (place)">
		<input type="hidden" id="latitude3" value="48.8600425">
		<input type="hidden" id="longitude3" value="2.3412674">
 
<input type="hidden" name="nbadresses" id="nbadresses" value="3">
</form>
</BODY>
</HTML>

J'ai une autre page qui affiche une vue streetview dans une infowindow :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
#map-canvas {
	height : 800px;
	width : 1100px;
	margin: auto;
	}
</style>
 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr">
</script>
 
<script type="text/javascript">
var geocoder;
var map;
// initialisation de la carte Google Map de départ
function initialiserCarte() {
geocoder = new google.maps.Geocoder();
// Latitude et longitude du centre de Paris pour centrer la carte de départ
var latlng = new google.maps.LatLng(48.8590519, 2.33254949999998);
 
  var mapOptions = {
    zoom      : 13,
    center    : latlng,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  }
  // map-canvas est le conteneur HTML de la carte Google Map
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
 
function TrouverAdresse()
{
	initialiserCarte();
 
	// Récupération de l'adresse tapée dans le formulaire
	var adresse = document.getElementById('adresse').value;
	geocoder = new google.maps.Geocoder();
	geocoder.geocode( { 'address': adresse}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK)
		{
		// Création du marqueur du lieu (épingle)
		var marker = new google.maps.Marker({
			map: map,
			position: results[0].geometry.location,
			latitude: results[0].geometry.location.latitude,
			title: adresse
			});
		}
	else
		{
		alert('Adresse introuvable : ' + status);
		}
 
	var contentString = '<div id="content" style="width:450px;height:300px;"></div>';
	var infowindow = new google.maps.InfoWindow({
	content: contentString
	});
 
	infowindow.open(map,marker);
	google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map,marker);
	});
 
 
	var pano = null;
	google.maps.event.addListener(infowindow, 'domready', function() {
	if (pano != null) {
	pano.unbind("position");
	pano.setVisible(false);
	}
	pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
	navigationControl: true,
	navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
 
	//GeocodeurLocationType: ROOFTOP,
	enableCloseButton: false,
	addressControl: true,
	linksControl: true,
 
	pov: {
		heading: 180,
		pitch: 0,
		zoom: 1
		}
 
	});
	//(48.850409, 2.362903899999992)
	pano.bindTo("position", marker);
	pano.setVisible(true);
	});
 
	google.maps.event.addListener(infowindow, 'closeclick', function() {
	pano.unbind("position");
	pano.setVisible(false);
	pano = null;
	});
 
});
 
}
 
// Lancement de la construction de la carte google map
google.maps.event.addDomListener(window, 'load', initialiserCarte);
</script>
</HEAD>
<BODY onload="TrouverAdresse();">
 
<form>
<center>
<div id="map-canvas"></div>
</center>
 
  <input type="text" id="adresse" value="29 rue de rivoli 75004 paris" size="50"/>
  <input type="button"  value="Localiser sur Google Map" onclick="TrouverAdresse();"/>
</form>
 
</BODY>
</HTML>

Mes deux pages fonctionnent bien, mais je souhaiterai faire un mix des deux.
Je souhaite, dans ma première page, qu'une infowindow avec l'aperçu streetview s'affiche quand on clique sur un marqueur.
Le problème, c'est que je ne sais pas quel code de ma deuxième page je dois intégrer dans la première, et surtout à quel endroit je dois le placer.

Si quelqu'un pouvait m'aider ?

Merci.

**pc75** · 01/09/2014, 13h16

Re,

C'est bon, j'ai réussi à m'en sortir.

Merci quand même !

InfoWindow et streetview [Google Maps]

APIs Google

Discussions similaires

Partager

Partager