Google Maps API mit lokalen Bildern?

**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

Google Maps API mit lokalen Bildern?

AW: Google Maps API mit lokalen Bildern?

Forumregeln