Composant Delphi / Google Maps / OpenStreetMap / Leaflet  / Mappilary / Native Maps 100% Delphi 0% WebBrowser 0% Javascript

Display StreetView in an InfoWindow

you are here :Programmation

Let's see how to display StreetView in a InfoWindow

StreetView is available only with Google Maps api !

39

The first step is to create our InfoWindow, We store the index in idStreetWindow

Its contents will be a component DIV who must have a unique name here "streetwindow"

It must also define its size, 300 pixels in height and width.



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

We connecting events OnInfoWindowOpen and OnInfoWindowClose to show/hide StreetView When InfoWindow will be open or closed.

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

In these events we use javascript to do the desired job.

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;

To open the InfoWindow you can either react directly when clicked on the map as you plugging into OnMapClick

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

But Alternatively, you can associate it with a marker and then it will open when clicked on it

 

Fig. 173 StreetView in InfoWindow

go to page
© 2016 ESCOT-SEP Christophe - Made width Help&Web - RSS - Google+