Afficher StreetView dans une InfoWindow

Nous allons voir comment afficher StreetView dans une InfoWindow

La première étape est de créer notre InfoWindow, nous stockons son index dans idStreetWindow

Son contenu sera un élément DIV qui devra avoir un nom unique ici "streetwindow"

Il faut aussi définir sa taille, 300 pixels en hauteur et largeur.

idStreetWindow := map.InfoWindows.Add('<div id="streetwindow" style="width:300px;height:300px"></div>');

Nous nous branchons sur les événements OnInfoWindowOpen et OnInfoWindowClose pour afficher/cacher StreetView lorsque l'InfoWindow sera ouverte ou fermée.

map.OnInfoWindowOpen := mapInfoWindowOpen;
map.OnInfoWindowClose := mapInfoWindowClose;

Dans ces événements nous utilisons javascript pour faire le travail désiré.

procedure TForm.mapInfoWindowOpen(sender: TObject;
const Index: Integer);
var js:string;
begin
if index=idStreetWindow then
begin
js :=
// get latitude and longitude of InfoWindow
'var LatLng = new google.maps.LatLng('+doubletostr(map.InfoWindows[ index].Latitude)+','+doubletostr(map.InfoWindows[ index].Longitude)+');'+

'var pano = new google.maps.StreetViewPanorama(document.getElementById("streetwindow"), {'+
'position:LatLng'+
'});'+
'pano.setVisible(true);';

// run javascript
map.Javascript(js);
end;


procedure TForm.mapInfoWindowClose(sender: TObject; const Index: Integer);
begin

if index=idStreetWindow then
begin
map.javascript('pano.setVisible(false);pano = null;');
end;
end;

Pour ouvrir l'InfoWindow vous pouvez soit réagir directement lors d'un clic sur la carte en vous branchant sur OnMapClick

procedure TForm.mapMapClick(sender: Tobject;const dLatitude, dLongitude: Double);
begin
map.InfoWindows[idStreetWindow].SetPosition(dlatitude,dlongitude);
map.InfoWindows[idStreetWindow].Open := true;
end;

Mais vous pouvez aussi l'associer à un marker et alors elle s'ouvrira lors d'un clic sur celui-ci

// anchor infowindow to marker number 0

map.InfoWindows[idStreetView].Anchor := 0;