Google Maps über COM (Component Object Model)

[duff]

Hallo Thom,

danke für die Info.

Aber wie bekomme ich den Layer wieder von der Karte?

Delphi-Quellcode:

//...
Google.Maps.TrafficLayer.SetMap(Nil);

hat nicht das gewünschte Ergebniss

Viele Grüße

[Thom]

Ja - das ist klar: Mit dieser Zeile legst Du ein neues Layer-Objekt an und zeigst dieses nicht an.

Das ist ein Nebenprodukt des Frameworks, daß man (fast) wie mit JavaScript programmieren kann: Ein Objekt einfach anlegen und anschließend nicht mehr daran denken...

Besser ist natürlich der Delphi-Stil:

Delphi-Quellcode:

type
  TForm1 = (...)
  private
    FTrafficLayer: TTrafficLayer;
    procedure HideTrafficLayer;
    [...]
  end;

procedure TForm1.Show(...);
begin
  [...]
  with TScript.Create(WebBrowser1) do
  begin  
    [...]
    FTrafficLayer:=Google.Maps.TrafficLayer; //Layer anlegen und merken
    FTrafficLayer.SetMap(Map); //Layer anzeigen
  end;
end;

procedure TForm1.HideTrafficLayer;
begin
  FTrafficLayer.SetMap(nil); //Layer ausblenden
end;

[Thom]

Nachdem ich mich fast zwei Tage lang mit dem Traffic Layer beschäftigt habe, möchte ich meine Erkenntnisse dazu zusammenfassen.

Die Seite von Google benutzt mit an Sicherheit grenzender Wahrscheinlichkeit nicht das "offizielle" API. Muß sie auch nicht - schließlich gehört beides Google. Ersichtlich wird das am etwas abgewandelten GUI. Die Karten werden zum Beispiel sanft gezoomt (wenn das der Benutzer-PC und seine Internetanbindung zulassen) und können mit einem leichten Schwung verschoben werden.

Mit dem standardmäßigen Traffic Layer des API's ist es meines Wissens nach leider nicht möglich, eine Verkehrsprognose wie auf der Seite von Google zu erstellen. Wobei meine Tests allerdings ergaben, daß es sich dabei um keine wirkliche Prognose nach dem Motto "Jetzt ist Stau - wie wird es voraussichtlich in einer Stunde aussehen?" handelt, sondern eher um von Google erfaßte statistische Werte, die eine Frage wie "Wie sieht die Stausituation am Autobahnkreuz XYZ freitags 16.30 Uhr aus?" beantworten könnten. Über den Wert einer derartigen Aussage kann man natürlich geteilter Meinung sein. Eine nette Spielerrei ist sie allemal.

Bei Google bin ich auf ein Beispiel bezüglich benutzerdefinierter Layer gestoßen - den sogenannten Overlay-Kartentypen.
Dort findet sich der interessante Satz:

Zitat:

Solche Kartentypen können transparente Ebenen besitzen, auf denen interessante Orte gekennzeichnet sind oder dem Nutzer zusätzliche Daten angezeigt werden. Die Verkehrsschicht von Google ist ein Beispiel für einen solchen Kartentyp.

Im nachfolgenden Absatz geht es um Bild-Kartentypen, gefolgt von einem Beispiel:

Zitat:

Mit dem folgenden Code wird ein grundlegender ImageMapType implementiert, der die Verkehrskacheln von Google verwendet. Beachten Sie, dass der Kartentyp in das overlayMapTypes-Array der Karte eingefügt wird:

Code:

var trafficOptions = {
  getTileUrl: function(coord, zoom) {     
    return "http://mt3.google.com/mapstt?" + 
    "zoom=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&client=google"; 
  }, 
  tileSize: new google.maps.Size(256, 256), 
  isPng: true 
}; 

var trafficMapType = new google.maps.ImageMapType(trafficOptions);   
var map; 
function initialize() { 
  map = new google.maps.Map(document.getElementById("map_canvas")); 
  map.setCenter(new google.maps.LatLng(37.76, -122.45)); 
  map.setZoom(12); 
  map.setMapTypeId('satellite'); 
  map.overlayMapTypes.insertAt(0, trafficMapType); 
}

Das mit dem Framework nachzubauen, ist kein Problem - nur funktioniert dieses Beispiel leider nicht (mehr), da sich die Server-Adressen und die zu übergebenden Parameter geändert haben.

Nun ist es allerdings kein allzugroßes Problem, die aktuellen URL's der Bild-Kacheln zu ermitteln.
Damit habe ich das Demoprogramm geändert und kann so - neben dem Traffic Layer über das API - auch die Verkehrssituation über einen zusätzlichen Layer anzeigen lassen:


Ein Vergleich des Standard Layers mit dem zusätzlichen zeigt einen interessanten Unterschied: Hier wird - wie auf der Google Seite - auch die Verkehrssituation in Frankreich angezeigt:


Beim Standard Traffic Layer werden die Informationen in der Satelliten-Ansicht ausgeblendet:


Im Gegensatz dazu ist die Darstellung im zusätzlichen Layer wesentlich besser steuerbar und entspricht der Ansicht auf der Google Seite:


Die "Verkehrsprognose" funktioniert so natürlich auch, da der Zeitpunkt für die Verkehrskarte als Parameter innerhalb der URL übergeben wird. Im Anhang befindet sich eine kleine compilierte Demo.

Noch ein kleiner Hinweis zur Aktualität der Verkehrsdaten:
Die Google Server liefern den Wert Cache-Control: private, max-age=60. Dennoch aktualisieren TWebBrowser und das Maps API die Bilder nicht zwingend, obwohl es angefordert wurde. Deshalb empfiehlt es sich, ab und zu die Zoomstufe zu verändern, die Karte zu verschieben oder die Ansicht zu wechseln, um den IE dazu zu veranlassen, seinen Cache aufzuräumen.

[duff]

Jetzt wird es noch interessanter ;D

Wettermeldungen bei Google Maps

[Thom]

Hallo duff,

vielen Dank für Deinen Hinweis!

Google's Wettervorhersage scheint - genau wie die Stauanzeige - nicht über das dokumentierte API zu laufen.
Trotzdem bekommt man das auch mit dem Framework hin. Bindet man die Wettersymbole als zusätzlichen Layer ein, stört allerdings die Beschriftung der eigentlichen Karte ganz enorm, da damit die Darstellung schnell unübersichtlich wird:


Werden spezielle Karten verwendet, bei denen die Beschriftung reduziert ist, wird sogar die Wolkenverteilung sichtbar:


Im Anhang befindet sich eine kompilierte Demo, die die Wetterkarte etwa so zeigt, wie auf der Maps-Seite von Google.

[Thom]

In diesem Beitrag möchte ich eine Demo vorstellen, die es ermöglicht, Wetterinformationen, die über das - nicht dokumentierte - Google Weather API abgerufen werden können, mit Hilfe des Frameworks darzustellen.


Diese Demo ist allerdings - im Gegensatz zu allen bisherigen - nur mit unicode-fähigen Delphi-Versionen (also ab 2009) kompilierbar. Besitzer älterer IDE's müßten die Anpassungen selbst vornehmen. Das hat nichts mit dem Framework zu tun, sondern mit den zu verarbeitenden Wetterdaten.

Google Weather API ist eigentlich eine vollkommen übertriebene Bezeichnung: Es handelt sich lediglich um eine URL, über die mit Hilfe zweier Parameter eine XML Datei abgerufen werden kann:

Code:

http://www.google.com/ig/api?weather=[LOCATION]&hl=[LANGUAGE]

• [LOCATION] ist dabei im einfachsten Fall der Ort, für den die Wetterinformationen abgerufen und
• [LANGUAGE] die Sprache (Länderkürzel), in der diese Informationen geliefert werden sollen.

Code:

http://www.google.com/ig/api?weather=Berlin&hl=de

liefert eine XML-Datei mit folgender Struktur:

Code:

<?xml version="1.0"?>
<xml_api_reply version="1">
  <weather module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0">
    <forecast_information>
      <city data="Berlin, Berlin"/>
      <postal_code data="Berlin"/>
      <latitude_e6 data=""/>
      <longitude_e6 data=""/>
      <forecast_date data="2011-08-24"/>
      <current_date_time data="2011-08-24 09:50:00 +0000"/>
      <unit_system data="SI"/>
    </forecast_information>
    <current_conditions>
      <condition data="Klar"/>
      <temp_f data="73"/>
      <temp_c data="23"/>
      <humidity data="Luftfeuchtigkeit: 78*%"/>
      <icon data="/ig/images/weather/sunny.gif"/>
      <wind_condition data="Wind: W mit 11 km/h"/>
    </current_conditions>
    <forecast_conditions>
      <day_of_week data="Mi."/>
      <low data="21"/>
      <high data="30"/>
      <icon data="/ig/images/weather/mostly_sunny.gif"/>
      <condition data="Teils sonnig"/>
    </forecast_conditions>
    <forecast_conditions>
      <day_of_week data="Do."/>
      <low data="23"/>
      <high data="29"/>
      <icon data="/ig/images/weather/chance_of_storm.gif"/>
      <condition data="Vereinzelt stürmisch"/>
    </forecast_conditions>
    <forecast_conditions>
      <day_of_week data="Fr."/>
      <low data="19"/>
      <high data="32"/>
      <icon data="/ig/images/weather/sunny.gif"/>
      <condition data="Klar"/>
    </forecast_conditions>
    <forecast_conditions>
      <day_of_week data="Sa."/>
      <low data="14"/>
      <high data="21"/>
      <icon data="/ig/images/weather/chance_of_rain.gif"/>
      <condition data="Vereinzelt Regen"/>
    </forecast_conditions>
  </weather>
</xml_api_reply>

Diese Datei enthält - neben den aktuellen Daten - sogar eine Vorhersage für die nächsten drei Tage.

Im Abschnitt xml_api_reply\weather\xxx_conditions\icon ist in der Regel sogar der Link zu einem Icon angegeben, so daß sich die Anzeige dieses Bildes als Marker anbietet.
Leider enthalten die Abschnitte xml_api_reply\weather\forecast_information\latitud e_e6 und xml_api_reply\weather\forecast_information\longitu de_e6 keine Angaben, so daß die Koordinaten für den Marker erst über eine Geocoding-Abfrage ermittelt werden müssen.

Die programmtechnische Umsetzung ist relativ einfach: Die XML-Datei wird mit Hilfe eine TIdHTTP-Komponente abgefragt und über eine TXMLDocument-Komponente geparst. Der Gebrauch des Geocoders und das Hinzufügen von Markern wurde schon in früheren Demos gezeigt.
Dabei ist lediglich zu beachten, daß die Eigenschaft CharSet des Request-Objektes auf UTF-8 zu setzten ist

Delphi-Quellcode:

  IdHTTP1.Request.CharSet:='UTF-8';
  //...

, damit der Google-Server die XML-Datei auch wirklich in der gewünschten Sprache liefert.

Damit ist es zum Beispiel möglich, das Wetter für Frankfurt am Main in hebräischer

für München in russischer

oder für Graz in thailändischer Sprache anzeigen zu lassen:


Interessant ist das Sonnensymbol links unten in Frankreich: Hier wurde als Sprache japanisch (ja) gewählt. Wahrscheinlich sieht die Sonne in Japan anders aus, als im Rest der Welt...

Im Quelltext der Demo wird noch ein weiterer Weg beschrieben:
Bei einem Klick mit der linken Maustaste auf die Karte wird (falls vorhanden) die Wetterinformation für diesen Punkt abgefragt und angezeigt. Der zugehörige Ort wird über Reverse Geocoding ermittelt.

[duff]

KLASSE