Google Maps über COM (Component Object Model)

[Thom]

Beispiel 1
Erstellung einer einfachen Karte

Delphi-Quellcode:

procedure TForm1.FormShow(Sender: TObject);
var
  Options: TMapOptions;
begin
  WebBrowser1.Navigate('about:blank');
  with TScript.Create(WebBrowser1) do                            //Skript-Objekt erstellen
  begin
    LoadBrowserFromSource(WebBrowser1,                           //leere Seite:
                          HTMLPage(true,                         //- MIT Google Maps API
                                   false,                        //- OHNE GPS-Sensor
                                   'div_map'),                   //- MIT Div-Container für die Karte
                          true);                                 //warten, bis die Seite komplett geladen wurde
    Options:=TMapOptions.Create;                                 //Options-Objekt anlegen
    with Options do
    begin
      Zoom:=13;                                                  //Zoom
      Center:=Google.Maps.LatLng(-25.3455315,131.0333570);       //Kartenzentrum
      MapTypeID:=Google.Maps.MapTypeId.SATELLITE;                //Kartentyp
    end;
    Google.Maps.Map(Document.GetElementById('div_map'),Options); //Karten-Objekt anlegen
  end;
end;

Anmerkung: Für den Screenshot wurde manuell auf den Kartentyp "Gelände" umgeschaltet.

Compilierte Demo:

[Thom]

Beipiel 2
Deaktivierung aller Steuerelemente und jeder Interaktion. Damit wird quasi eine statische Karte erzeugt.

Delphi-Quellcode:

procedure TForm1.FormShow(Sender: TObject);
var
  Options: TMapOptions;
begin
  WebBrowser1.Navigate('about:blank');
  with TScript.Create(WebBrowser1) do                            //Skript-Objekt erstellen
  begin
    LoadBrowserFromSource(WebBrowser1,                           //leere Seite:
                          HTMLPage(true,                         //- MIT Google Maps API
                                   false,                        //- OHNE GPS-Sensor
                                   'div_map'),                   //- MIT Div-Container für die Karte
                          true);                                 //warten, bis die Seite komplett geladen wurde
    Options:=TMapOptions.Create;                                 //Options-Objekt anlegen
    with Options do
    begin
      Center:=Google.Maps.LatLng(-33,151);                       //Kartenzentrum
      DisableDefaultUI:=true;                                    //alle Kontrollelemente ausschalten
      DisableDoubleClickZoom:=true;                              //kein Zoom per Doppelklick
      Draggable:=false;                                          //Karte nicht verschiebbar
      KeyboardShortcuts:=false;                                  //keine Tastenkürzel
      MapTypeID:=Google.Maps.MapTypeId.Roadmap;                  //Kartentyp
      ScrollWheel:=false;                                        //kein Zoom über Mausrad
      Zoom:=4;                                                   //Zoom
    end;
    Google.Maps.Map(Document.GetElementById('div_map'),Options); //Karten-Objekt anlegen
  end;
end;

Compilierte Demo:

[Thom]

Beispiel 3
Ein- und Ausschalten der Steuerelemente.

Delphi-Quellcode:

procedure TForm1.FormShow(Sender: TObject);
var
  Options: TMapOptions;
begin
  WebBrowser1.Navigate('about:blank');
  Script:=TScript.Create(WebBrowser1);                           //Skript-Objekt erstellen
  with Script do
  begin
    LoadBrowserFromSource(WebBrowser1,                           //leere Seite:
                          HTMLPage(true,                         //- MIT Google Maps API
                                   false,                        //- OHNE GPS-Sensor
                                   'div_map'),                   //- MIT Div-Container für die Karte
                          true);                                 //warten, bis die Seite komplett geladen wurde
    Options:=TMapOptions.Create;                                 //Options-Objekt anlegen
    with Options do
    begin
      Center:=Google.Maps.LatLng(-28.643387,153.612224);         //Kartenzentrum
      MapTypeControl:=true;                                      //Kartentyp-Kontrolle sichtbar
      with MapTypeControlOptions do
      begin
        Style:=Google.Maps.MapTypeControlStyle.Dropdown_Menu;    //Kartentyp-Kontrolle als aufklappbares Menü
        Position:=Google.Maps.ControlPosition.Top_Left;          //Kartentyp-Kontrolle links oben
      end;
      NavigationControl:=true;                                   //Navigationskontrolle sichtbar
      with NavigationControlOptions do
      begin
        Style:=Google.Maps.NavigationControlStyle.Android;       //Navigationskontrolle im Android-Design
        Position:=Google.Maps.ControlPosition.Bottom;            //Navigationskontrolle unten in der Mitte
      end;
      ScaleControl:=true;                                        //Maßstab sichtbar
      with ScaleControlOptions do
        Position:=Google.Maps.ControlPosition.Top_Right;         //Maßstab rechts oben
      StreetViewControl:=true;                                   //StreetView-Kontrolle sichtbar
      MapTypeID:=Google.Maps.MapTypeId.Roadmap;                  //Kartentyp Straße
      Zoom:=12;                                                  //Zoom
    end;
    Google.Maps.Map(Document.GetElementById('div_map'),Options); //Karten-Objekt anlegen
  end;
end;

Compilierte Demo:

[Thom]

Beispiel 4
Verwendung der Karten-Events

Delphi-Quellcode:

procedure TForm1.FormShow(Sender: TObject);
begin
//...
    with Map do
    begin
      OnBoundsChanged:=MapBoundsChanged;
      OnCenterChanged:=MapCenterChanged;
      OnClick:=MapClick;
      OnDblClick:=MapDblClick;
      OnDrag:=MapDrag;
      OnDragEnd:=MapDragEnd;
      OnDragStart:=MapDragStart;
      OnIdle:=MapIdle;
      OnMapTypeIDChanged:=MapMapTypeIDChanged;
      OnMouseMove:=MapMouseMove;
      OnMouseOut:=MapMouseOut;
      OnMouseOver:=MapMouseOver;
      OnProjectionChanged:=MapProjectionChanged;
      OnResize:=MapResize;
      OnRightClick:=MapRightClick;
      OnTilesLoaded:=MapTilesLoaded;
      OnZoomChanged:=MapZoomChanged;
    end;
  end;
end;

Compilierte Demo:

[Thom]

Die Demos 1 bis 4 im Quelltext (ohne exe). Sie wurden sowohl mit Delphi 5, Delphi 2005 PE, Delphi 2010 als auch mit Delphi XE getestet.

Achtung:
Zur Compilierung sind die Units in den Unterverzeichnissen API und JScript notwendig, die bei mir separat angefordert werden können!

Neue Version der Wrapper-Objekte: Jetzt ist nicht mehr TWebBrowser zur Darstellung der Karten notwendig - es wird auch TEmbeddedWB unterstützt. Genauer gesagt: Es können alle IE-ActiveX-Komponenten genutzt werden, die auf TOleControl basieren!
Das ist vor allem bei Delphi-Versionen hilfreich, die standardmäßig keine installierte TWebBrowser-Komponente in der Palette haben - das hatte ich gestern voller Entsetzen beim Test mit Delphi 2005 PE feststellen müssen.

[Thom]

Beipiel 5
Verwendung der asynchronen Funktionen des Google Maps API's mittels Callback-Funktionen, Verwendung des Geocoders und des Elevation-Service

Die Arbeitsweise des Google Maps API's wurde in Version 3 konsequent asynchron gestaltet. Es fängt damit an, dass sogar das komplette API asynchron geladen werden kann:

Code:

http://maps.google.com/maps/api/js?sensor=true_or_false&callback=FunctionXYZ

Nachdem alle Module von den Google-Servern geladen wurden, ruft das API die angegebene (JavaScript-)Callback-Funktion auf.
Die ganze Umsetzung - angefangen bei der Bereitstellung der JavaScript-Funktion bis hin zum Aufruf der gewünschten Delphi-Methode - wird vom Framework übernommen. Dem eigentlichen Delphi-Quelltext sieht man die Komplexität dieses Vorganges gar nicht mehr an:

Delphi-Quellcode:

procedure TForm1.FormShow(Sender: TObject);
begin
  WebBrowser1.Navigate('about:blank');
  Script:=TScript.Create(WebBrowser1);                               //Skript-Objekt erstellen
  with Script do
  begin
    LoadBrowserFromSource(WebBrowser1,                               //leere Seite:
                          HTMLPage(false,                            //- OHNE Google Maps API
                                   false,                            //- OHNE GPS-Sensor
                                   'div_map'),                       //- MIT Div-Container für die Karte
                          true);                                     //warten, bis die leere komplett geladen wurde
    LoadAPIAsync(false,OnAPILoaded);                                 //Google Maps-API asynchron laden; Parameter: kein Sensor, Callback-Methode
  end;
end;

procedure TForm1.OnAPILoaded;
begin
  //z.B. Karte erstellen
end;

Wie wäre es aber in dem Fall, wenn die Koordinaten des Zielgebietes unbekannt sind? Wie in den vorangegangenen Beispielen gezeigt wurde, werden diese aber zur Erstellung der Karte benötigt.
Für diese Aufgabe steht der Geocoder zur Verfügung. Auch dieser ist ein JavaScript-Objekt, das erstellt und mit der Anfrage "gefüttert" werden muß. Nachdem dieses Geocoder-Objekt beim Google-Server nachgefragt hat, wird wiederum eine Callback-Funktion aufgerufen:

Delphi-Quellcode:

procedure TForm1.OnAPILoaded;
var
  GeocoderRequest: TGeocoderRequest;
begin
  with Script do
  begin
    GeocoderRequest:=TGeocoderRequest.Create;                        //GeocoderRequest-Objekt anlegen
    GeocoderRequest.Address:='Mount Kilimanjaro';                    //zu kodierende Adresse
    Google.Maps.Geocoder.Geocode(GeocoderRequest,GeocoderCallback);  //Geocoder-Objekt erstellen und Kodierung vom Server anfordern
  end;
end;

procedure TForm1.GeocoderCallback(Sender: TObject; Results: TGeocoderResults; Status: String);
var
  LatLng: TLatLng;
  //...
begin
  with Script do
  begin
    if Status=Google.Maps.GeocoderStatus.Ok then                     //Kodierungsanfrage wurde ordnungsgemäß bearbeitet
    begin
      LatLng:=Results[0].Geometry.Location;                          //erste Adresse aus der Kodierungsanfrage
      //Karte neu anlegen bzw. neu zentrieren...
    end else ShowMessage(Status);
end;

Praktisch wäre es jetzt noch, auch die Höhe des gewünschten Punktes auf der Landkarte zu ermitteln. Dafür ist der Elevation-Service der richtige Ansprechpartner. Genau wie der Geocoder besteht er aus einem JavaScript-Objekt, das die Anfrage an Google weiterleitet und nach dem Empfang die Antwort an eine entsprechende Callback-Funktion übergibt. In Delphi sieht das so aus:

Delphi-Quellcode:

procedure TForm1.GeocoderCallback(Sender: TObject; Results: TGeocoderResults; Status: String);
var
  //...
  ElevationRequest: TLocationElevationRequest;
begin
  with Script do
  begin
    //...      
    ElevationRequest:=TLocationElevationRequest.Create;            //ElevationRequest-Objekt anlegen
    ElevationRequest.Locations.Add(LatLng);                        //Ort für die Abfrage der Höhe
    if ElevationServices.Count=0                                   //noch kein ElevationService-Objekt vorhanden
      then Google.Maps.ElevationService;                           //-> neu anlegen
    ElevationServices[0].GetElevationForLocations(ElevationRequest,ElevationCallback);
    //...
  end;
end;

procedure TForm1.ElevationCallback(Sender: TObject; Results: TElevationResults; Status: String);
begin
  with Script do
  begin
    if Status=Google.Maps.ElevationStatus.Ok 
      then  //irgendetwas mit den Daten machen
      else ShowMessage(Status);
  end;
end;

In der Demo wird mit Hilfe der ermittelten Daten ein anklickbarer Marker erstellt.
Als kleiner Zusatz wird demonstriert, wie ein Screenshot vom WebBrowser gemacht werden kann.



Demo_5.zip enthält die Komponente TImage32 aus dem Paket Graphics32, Demo_5_ohne_TImage32.zip arbeitet nur mit TImage und ist deshalb auch ohne Graphics32 compilierbar.

Compilierte Exe und Quelltext (ohne Exe):

[Thom]

Beispiel 6
Geometrische Formen: Kreise, Rechtecke, Polygone, Polylines
(auf besonderen Wunsch von DelphiFan2008)

Alle diese Formen sind (JavaScript-)Objekte. Sie werden erstellt, indem ein passendes Options-Objekt angelegt, mit den entsprechende Werten initialisiert und an den Konstruktor des Geometrie-Objektes übergeben wird.
Zwingend notwendig ist die Festlegung der Ausmaße: Beim Kreis wären das der Mittelpunkt und der Radius, beim Rechteck die linke untere (Süd-West) und die rechte obere Ecke (Nord-Ost) und bei den Linienobjekten die Koordinaten der einzelnen Eckpunkte.
In der Regel werden diese Werte in Form von LatLng-Objekten angegeben - die einzige Ausnahme ist der Kreis: Dort wird der Radius in Metern erwartet.
Optional hingegen sind zum Beispiel die Werte für Linienfarbe, -breite und -transparenz.
Soll das Objekt auf einer Karte dargestellt werden, muß ihm (bzw. vor der Erstellung dem Optionsobjekt) die entsprechende Karte zugewiesen werden.
Das könnte zum Beispiel so aussehen:

Delphi-Quellcode:

procedure TForm1.Button1Click(Sender: TObject);
var
  CircleOptions: TCircleOptions;
begin
  with Script do
  begin
    CircleOptions:=TCircleOptions.Create;                  //Zirkeloptions-Objekt erstellen
    CircleOptions.Center:=Google.Maps.LatLng(10,20);     //Zirkelmittelpunkt
    CircleOptions.Map:=Maps[0];                     //Kartenobjekt zuweisen
    CircleOptions.Radius:=1000;                     //Radius in Metern
    CircleOptions.StrokeColor:=clRed;               //Linienfarbe
    Google.Maps.Circle(CircleOptions);              //Zirkel-Objekt erstellen
  end;
end;

Soll das Objekt wieder von der Karte entfernt werden, reicht es aus, seiner Map-Eigenschaft den Wert nil zuzuweisen.



Compilierte Exe und Quelltext (ohne Exe):

[rzzanatta]

Hallo, ich heruntergeladen habe die Demo und nicht kompilieren, dieser Fehler [DCC Fatal Error] Unit1.pas(9): F1026 File not found: 'BrowserTools.dcu' was mache ich jetzt?

Ich benutze Delphi 2010

Zitat von Thom:

Die Demos 1 bis 4 im Quelltext (ohne exe). Sie wurden sowohl mit Delphi 5, Delphi 2005 PE, Delphi 2010 als auch mit Delphi XE getestet.

Achtung:
Zur Compilierung sind die Units in den Unterverzeichnissen API und JScript notwendig, die bei mir separat angefordert werden können!

Neue Version der Wrapper-Objekte: Jetzt ist nicht mehr TWebBrowser zur Darstellung der Karten notwendig - es wird auch TEmbeddedWB unterstützt. Genauer gesagt: Es können alle IE-ActiveX-Komponenten genutzt werden, die auf TOleControl basieren!
Das ist vor allem bei Delphi-Versionen hilfreich, die standardmäßig keine installierte TWebBrowser-Komponente in der Palette haben - das hatte ich gestern voller Entsetzen beim Test mit Delphi 2005 PE feststellen müssen.

[Thom]

Hallo Rodrigo,

die Unterverzeichnisse API und JScript sind jetzt im Framework enthalten (GoogleMaps\Source\API und GoogleMaps\Source\JScript). Sie müssen nur in den Suchpfad der IDE oder des Projektes aufgenommen werden.

[ChKolumbus]

Zitat von Thom:

Beispiel 3
Ein- und Ausschalten der Steuerelemente.
Anhang 32934
Compilierte Demo:

Hallo Tom,

leider funktioniert das Ein- und Ausblenden einiger Map Controls nicht mehr richtig. Deutlich wird das auch in dem vor einiger Zeit mal veröffentlichten Beispiel-Programm aus Beitrag

Zitat von Thom:

Beispiel 3
Ein- und Ausschalten der Steuerelemente.
Anhang 32934
Compilierte Demo:

MapTypeControl und StreetViewControl gehen noch.
NavigationControl und Scale Control gehen leider nicht mehr.

Das setzen der Properties .MapTypeControl und .ScaleControl von TMap bleibt nun leider wirkungslos.

Hat jemand einen Tip wie man das wieder hinbekommen kann? Ich blicke da leider nicht genug durch

Wird es irgendwann eine Anpassung an die GoogleMaps Api Version 3 geben? Ist in dieser Richtig etwas geplant?

Schon mal vielen Dank für eure eventuelle Hilfe!