Lors de l’affichage d’une carte Google Maps, il peut être intéressant de placer dans l’infobulle du marqueur une iframe. Cela permet d’afficher une page web.

Dans l’exemple, je vais afficher une streetview pour chacun des membres de ma famille.

Le script 

Début du script et création de la carte :

 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
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=clé_api'></script>
<script>
	function initCarte(){

Définition des variables :        

	// les variables (LatLng correspond à la position : latitude et longitude)	    		
	var locations = [
	['marqueur3', 50.628667, 3.055228, 3],
	['marqueur2', 45.756736, 4.838895, 2],
	['marqueur1', 48.606330, 2.886040, 1]
	];
	var noms = [
	['nom3', 3],
	['nom2', 2],
	['nom1', 1]
	];
	var descriptif = [
	['descriptif3', 3],
	['descriptif2', 2],      		
	['descriptif1', 1],
	];

Création de la carte :     

	// création de la carte (carte_famille)
	var carte_famille = new google.maps.Map( document.getElementById( 'div_carte'),{
	'center' : new google.maps.LatLng(Lat,Lng), 
	'zoom' : 6,			     
	'mapTypeId' : google.maps.MapTypeId.ROADMAP, 
	'zoomControl' : true,              
	'scrollwheel' : true,             
	'disableDoubleClickZoom' : true    
	});

Intégration des marqueurs, de leur titre (nom), des infobulles avec leur contenu (descriptif) et fin du script :        

	// les infobulles
	var infowindow = new google.maps.InfoWindow();	    	
	// les marqueurs
	var marker, i;
	for (i = 0; i < locations.length; i++) {  
	var nom = noms[i];
	marker = new google.maps.Marker({
	position: new google.maps.LatLng(locations[i][1], locations[i][2]),
	title: nom[0], 
	map: carte_famille 
	});
	google.maps.event.addListener(marker, 'click', (function(marker, i) {
	return function() {
	infowindow.setContent(descriptif [i][0]);
	infowindow.open(carte_famille, marker);
	}
	})(marker, i));
	}
	}
	// init lorsque la page est chargée
	google.maps.event.addDomListener( window, 'load', initCarte);
	</script>

Structure des infobulles, de leur contenu avec les iframes (à placer dans var descriptif) :

['<h1>titre</h1>' +
'<iframe  src="url de la page web"></iframe>', 1],

Vous pouvez définir la hauteur, la largeur et les bordures de l’iframe.

width="largeur" height="hauteur" frameborder="0" style="border:0" allowfullscreen

Affichage de la carte (dans <body>) :

<div id="div_carte"></div>

Le résultat