Google Maps API mit lokalen Bildern?

**AndyK**

Hallo,

ich nutze die Google Maps API (3.0) in meiner D5 Anwendung. Dabei verwende ich zwei eigene PNG Bilder als Marker. Derzeit liegen diese auf einem Server.
Ist es möglich diese lokal im Programmverzeichnis oder als Ressource zu speichern und zu nutzen?

Gruss
Andy

**Thom**

Hallo Andy,

ja, da gibt es viele Möglichkeiten.
Zu Beginn ist allerdings die Frage zu klären, wie Du das API ansprichst - also über eine Komponente (falls ja, welche) oder über die Exec-Methode des Browsers. Dann wäre auch noch wichtig zu wissen, welchen Browser Du zur Anzeige verwendest: Den Internet Explorer (TWebBrowser, TEmbeddedWB) oder Chromium Embedded?

**AndyK**

Hallo Thom,

ich arbeite mit der TWebBrowser Komponente. Über eine Konstante lade ich das Java-Script für die Maps. Bei "function PutMarkerBlue" und "function PutMarker" werden die Marker als Image definiert. Den Großteil dieser Einbindung hatte ich aus einem Tutorial, könnte also dem Ein oder Anderen bekannt vorkommen

:

zusammenfalten · markieren

Delphi-Quellcode:

			const

HTMLStr: AnsiString =

'<html> '+

'<head> '+

'<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> '+

'<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> '+

'<script type="text/javascript"> '+

''+

''+

'  var geocoder; '+

'  var map;  '+

'  var trafficLayer;'+

'  var bikeLayer;'+

'  var markersArray = [];'+

''+

''+

'  function initialize() { '+

'    geocoder = new google.maps.Geocoder();'+

'    var latlng = new google.maps.LatLng(49.067231,10.837039); '+

'    var myOptions = { '+

'      zoom: 12, '+

'      center: latlng, '+

'      mapTypeId: google.maps.MapTypeId.HYBRID'+

'    }; '+

'    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); '+

'    trafficLayer = new google.maps.TrafficLayer();'+

'    bikeLayer = new google.maps.BicyclingLayer();'+

'    map.set("streetViewControl", false);'+

'  } '+

''+

''+

'  function codeAddress(address) { '+

'    if (geocoder) {'+

'      geocoder.geocode( { address: address}, function(results, status) { '+

'        if (status == google.maps.GeocoderStatus.OK) {'+

'          map.setCenter(results[0].geometry.location);'+

'          PutMarker(results[0].geometry.location.lat(), results[0].geometry.location.lng(), results[0].geometry.location.lat()+","+results[0].geometry.location.lng());'+

'        } else {'+

'          alert("Geocode was not successful for the following reason: " + status);'+

'        }'+

'      });'+

'    }'+

'  }'+

''+

''+

'  function codeAddressBlue(address) { '+

'    if (geocoder) {'+

'      geocoder.geocode( { address: address}, function(results, status) { '+

'        if (status == google.maps.GeocoderStatus.OK) {'+

'          map.setCenter(results[0].geometry.location);'+

'          PutMarkerBlue(results[0].geometry.location.lat(), results[0].geometry.location.lng(), results[0].geometry.location.lat()+","+results[0].geometry.location.lng());'+

'        } else {'+

'          alert("Geocode was not successful for the following reason: " + status);'+

'        }'+

'      });'+

'    }'+

'  }'+

''+

''+

'  function GotoLatLng(Lat, Lang) { '+

'   var latlng = new google.maps.LatLng(Lat,Lang);'+

'   map.setCenter(latlng);'+

'   PutMarker(Lat, Lang, Lat+","+Lang);'+

'  }'+

''+

''+

'function ClearMarkers() {  '+

'  if (markersArray) {        '+

'    for (i in markersArray) {  '+

'      markersArray[i].setMap(null); '+

'    } '+

'  } '+

'}  '+

''+

'  function PutMarkerBlue(Lat, Lang, Msg) { '+

'   var latlng = new google.maps.LatLng(Lat,Lang);'+

'   var image = "http://www.domain.de/images/blue-pushpin.png";'+    //

'   var marker = new google.maps.Marker({'+

'      position: latlng, '+

'      map: map,'+

'      icon: image,'+ //

'      title: "Alarmierte Wehr"'+

'  });'+

' markersArray.push(marker); '+

'  }'+

''+

'  function PutMarker(Lat, Lang, Msg) { '+

'   var latlng = new google.maps.LatLng(Lat,Lang);'+

'   var image = "http://www.domain.de/images/firedept.png";'+    //

'   var marker = new google.maps.Marker({'+

'      position: latlng, '+

'      map: map,'+

'      icon: image,'+ //

'      title: "Einsatzort"'+

'  });'+

' markersArray.push(marker); '+

'  }'+

''+

''+

'  function TrafficOn()   { trafficLayer.setMap(map); }'+

''+

'  function TrafficOff()  { trafficLayer.setMap(null); }'+

''+''+

'  function BicyclingOn() { bikeLayer.setMap(map); }'+

''+

'  function BicyclingOff(){ bikeLayer.setMap(null);}'+

''+

'  function StreetViewOn() { map.set("streetViewControl", true); }'+

''+

'  function StreetViewOff() { map.set("streetViewControl", false); }'+

''+

''+'</script> '+

'</head> '+

'<body onload="initialize()"> '+

'  <div id="map_canvas" style="width:100%; height:100%"></div> '+

'</body> '+

'</html> ';

FormCreate läd dann entsprechend die ersten Daten. Über einen Startparameter wird ein Ortsname übertragen und dann in der Karte gesucht:

zusammenfalten · markieren

Delphi-Quellcode:

			procedure TfrmMain.FormCreate(Sender: TObject);

var

   aStream     : TMemoryStream;

   adr    : string;

begin

   WebBrowser1.Navigate('about:blank');

    if Assigned(WebBrowser1.Document) then

    begin

      aStream := TMemoryStream.Create;

      try

         aStream.WriteBuffer(Pointer(HTMLStr)^, Length(HTMLStr));

         //aStream.Write(HTMLStr[1], Length(HTMLStr));

         aStream.Seek(0, soFromBeginning);

         (WebBrowser1.Document as IPersistStreamInit).Load(TStreamAdapter.Create(aStream));

      finally

         aStream.Free;

      end;

      HTMLWindow2 := (WebBrowser1.Document as IHTMLDocument2).parentWindow;

    end;

    adresse := ParamStr(1);

    if adresse <> '' then

    begin

       Edit1.Text := adresse;

       adr := adresse;

       adr := StringReplace(StringReplace(Trim(adr), #13, ' ', [rfReplaceAll]), #10, ' ', [rfReplaceAll]);

       HTMLWindow2.execScript(Format('codeAddress(%s)',[QuotedStr(adr)]), 'JavaScript');

    end;

end;

Über welchen Weg kann ich nun die zwei Bilder lokal speichern oder in die Anwendung einbinden um sie in der Karte zu nutzen? Ich hatte es schon als Ressource eingebunden, jedoch blieb ich beim Einbinden hängen.

Gruß
Andy

**Thom**

Hallo Andy,

im Quelltext sehe ich

markieren

Code:

			  var image = "http://www.domain.de/images/blue-pushpin.png";

  var marker = new google.maps.Marker({

    position: latlng,

    map: map,

    icon: image,

    title: "BlaBla"});

Da der IE lokale Dateien akzeptiert, könntest Du bei "image" auch den Ort des Bildes auf der Festplatte angeben. Das wäre der einfachste, aber leider auch unflexibelste Weg.
Viel besser wäre die Übergabe als Base64-codiertes Bild an die Methode "setIcon" des Markers. Damit ist es möglich, das Bild aus einer beliebigen Quelle zu entnehmen - beispielsweise TImageList, TImage oder auch dynamisch erzeugt.

Aber bevor ich das jetzt ausführlich erkläre, mal noch eine prinzipielle Frage: Willst Du unbedingt mit HTML und JavaScript arbeiten oder wäre auch eine reine Delphi-Lösung annehmbar?
Also zum Beispiel so etwas:

markieren

Delphi-Quellcode:

			  Markers[0].SetIcon(Encode64(Image1));

  Markers[1].SetIcon(Encode64(Image2));

**AndyK**

Zitat von Thom:

Aber bevor ich das jetzt ausführlich erkläre, mal noch eine prinzipielle Frage: Willst Du unbedingt mit HTML und JavaScript arbeiten oder wäre auch eine reine Delphi-Lösung annehmbar?
Also zum Beispiel so etwas:

markieren

Delphi-Quellcode:

			  Markers[0].SetIcon(Encode64(Image1));

  Markers[1].SetIcon(Encode64(Image2));

Über welchen Weg ich dabei gehe ist mir ziemlich egal

Hauptsache es funktioniert zuverlässig. Dann werde ich mir das die Tage mal vornehmen. Vielen Dank schonmal für deine Hilfe!

**Thom**

Hallo Andy,

also wenn es Dir egal ist, dann schau Dir vielleicht mal das

Google Maps Framework hier im Forum an. Damit kannst Du ausschließlich mit Delphi alle API-Funktionen nutzen. Dafür hätte ich dann auch eine Demo zur Nutzung von lokalen Icons bei Markern.

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche
Ansicht
Zur Linear-Darstellung wechseln Hybrid-Darstellung Zur Baum-Darstellung wechseln

Google Maps API mit lokalen Bildern?

Google Maps API mit lokalen Bildern?

AW: Google Maps API mit lokalen Bildern?

AW: Google Maps API mit lokalen Bildern?

AW: Google Maps API mit lokalen Bildern?

AW: Google Maps API mit lokalen Bildern?

AW: Google Maps API mit lokalen Bildern?

Forumregeln

AndyK Registriert seit: 21. Mär 2006 12 Beiträge	#1 Google Maps API mit lokalen Bildern? 21. Mai 2012, 17:08 Hallo, ich nutze die Google Maps API (3.0) in meiner D5 Anwendung. Dabei verwende ich zwei eigene PNG Bilder als Marker. Derzeit liegen diese auf einem Server. Ist es möglich diese lokal im Programmverzeichnis oder als Ressource zu speichern und zu nutzen? Gruss Andy
	Zitat

Thom Registriert seit: 19. Mai 2006 570 Beiträge Delphi XE3 Professional	#6 AW: Google Maps API mit lokalen Bildern? 21. Mai 2012, 21:55 Hallo Andy, also wenn es Dir egal ist, dann schau Dir vielleicht mal das Google Maps Framework hier im Forum an. Damit kannst Du ausschließlich mit Delphi alle API-Funktionen nutzen. Dafür hätte ich dann auch eine Demo zur Nutzung von lokalen Icons bei Markern. Thomas Nitzschke Google Maps mit Delphi
	Zitat