The Google Maps Javascript API Version 2 has been officially deprecated, so it’s time to update to the new version 3, this post shows how you can use the new Google maps V3 API from Delphi.
in this sample application you can use the traffic layer , Bicycling layer and the street View Control to activate the panorama view.
for additional info about the Google maps api v3 you can check these links.
- Google Maps JavaScript API V3
- The Google Maps Javascript API V3 – Basics
- Google Map Javascript API V3 – Map Types
Check the next full commented sample application written in Delphi 2007, the source code is available in this location
unit fMain;
interface
uses
Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
Dialogs, OleCtrls, SHDocVw, StdCtrls, ExtCtrls, XPMan, ComCtrls,MSHTML;
type
TfrmMain = class(TForm)
WebBrowser1: TWebBrowser;
LabelAddress: TLabel;
PanelHeader: TPanel;
ButtonGotoLocation: TButton;
XPManifest1: TXPManifest;
MemoAddress: TMemo;
ButtonGotoAddress: TButton;
LabelLatitude: TLabel;
LabelLongitude: TLabel;
Longitude: TEdit;
Latitude: TEdit;
CheckBoxTraffic: TCheckBox;
CheckBoxBicycling: TCheckBox;
CheckBoxStreeView: TCheckBox;
procedure FormCreate(Sender: TObject);
procedure ButtonGotoAddressClick(Sender: TObject);
procedure ButtonGotoLocationClick(Sender: TObject);
procedure CheckBoxTrafficClick(Sender: TObject);
procedure CheckBoxBicyclingClick(Sender: TObject);
procedure CheckBoxStreeViewClick(Sender: TObject);
private
{ Private declarations }
HTMLWindow2: IHTMLWindow2;
public
{ Public declarations }
end;
var
frmMain: TfrmMain;
implementation
uses
ActiveX;
{$R *.dfm}
const
HTMLStr: String = //i put The code for the web page page wich load the google maps in a string const, you can use an external html file too or embed the page in a resource and then load in a stream
'<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"> '+
''+
''+//Declare the globals vars to be used in the javascript functions
' var geocoder; '+
' var map; '+
' var trafficLayer;'+
' var bikeLayer;'+
''+
''+
' function initialize() { '+
' geocoder = new google.maps.Geocoder();'+
' var latlng = new google.maps.LatLng(40.714776,-74.019213); '+ //Set the initial coordinates for the map
' var myOptions = { '+
' zoom: 13, '+
' center: latlng, '+
' mapTypeId: google.maps.MapTypeId.ROADMAP '+ //Set the default type map
' }; '+
' map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); '+
' trafficLayer = new google.maps.TrafficLayer();'+ //Create the traffic Layer instance
' bikeLayer = new google.maps.BicyclingLayer();'+ //Create the Bicycling Layer instance
' } '+
''+
''+
' function codeAddress(address) { '+ //function to translate an address to coordinates and put and marker.
' if (geocoder) {'+
' geocoder.geocode( { address: address}, function(results, status) { '+
' if (status == google.maps.GeocoderStatus.OK) {'+
' map.setCenter(results[0].geometry.location);'+
' var marker = new google.maps.Marker({'+
' map: map,'+
' position: results[0].geometry.location'+
' });'+
' } else {'+
' alert("Geocode was not successful for the following reason: " + status);'+
' }'+
' });'+
' }'+
' }'+
''+
''+
' function GotoLatLng(Lat, Lang) { '+ //Set the map in the coordinates and put a marker
' var latlng = new google.maps.LatLng(Lat,Lang);'+
' map.setCenter(latlng);'+
' var marker = new google.maps.Marker({'+
' position: latlng, '+
' map: map,'+
' title:Lat+","+Lang'+
' });'+
' }'+
''+
''+
' function TrafficOn() { trafficLayer.setMap(map); }'+ //Activate the Traffic layer
''+
' function TrafficOff() { trafficLayer.setMap(null); }'+
''+''+
' function BicyclingOn() { bikeLayer.setMap(map); }'+//Activate the Bicycling layer
''+
' function BicyclingOff(){ bikeLayer.setMap(null);}'+
''+
' function StreetViewOn() { map.set("streetViewControl", true); }'+//Activate the streeview control
''+
' function StreetViewOff() { map.set("streetViewControl", false); }'+
''+
''+'</script> '+
'</head> '+
'<body onload="initialize()"> '+
' <div id="map_canvas" style="width:100%; height:100%"></div> '+
'</body> '+
'</html> ';
procedure TfrmMain.FormCreate(Sender: TObject);
var
aStream : TMemoryStream;
begin
WebBrowser1.Navigate('about:blank'); //Set the location to an empty page
if Assigned(WebBrowser1.Document) then
begin
aStream := TMemoryStream.Create; //create a TStem to load the Page from the string
try
aStream.WriteBuffer(Pointer(HTMLStr)^, Length(HTMLStr)); //Copy the string to the stream
//aStream.Write(HTMLStr[1], Length(HTMLStr));
aStream.Seek(0, soFromBeginning);
(WebBrowser1.Document as IPersistStreamInit).Load(TStreamAdapter.Create(aStream));//Load the page from the stream
finally
aStream.Free;
end;
HTMLWindow2 := (WebBrowser1.Document as IHTMLDocument2).parentWindow; //Set the instance of the parentWindow to call the javascripts functions
end;
end;
procedure TfrmMain.ButtonGotoLocationClick(Sender: TObject);
begin
HTMLWindow2.execScript(Format('GotoLatLng(%s,%s)',[Latitude.Text,Longitude.Text]), 'JavaScript');//Call the function GotoLatLng to go the coordinates
end;
procedure TfrmMain.ButtonGotoAddressClick(Sender: TObject);
var
address : string;
begin
address := MemoAddress.Lines.Text;
address := StringReplace(StringReplace(Trim(address), #13, ' ', [rfReplaceAll]), #10, ' ', [rfReplaceAll]);
HTMLWindow2.execScript(Format('codeAddress(%s)',[QuotedStr(address)]), 'JavaScript');//Call the function codeAddress to go the address
end;
procedure TfrmMain.CheckBoxStreeViewClick(Sender: TObject);
begin
if CheckBoxStreeView.Checked then
HTMLWindow2.execScript('StreetViewOn()', 'JavaScript') //Activate the Street View option
else
HTMLWindow2.execScript('StreetViewOff()', 'JavaScript');//Deactivate the Street View option
end;
procedure TfrmMain.CheckBoxBicyclingClick(Sender: TObject);
begin
if CheckBoxBicycling.Checked then
HTMLWindow2.execScript('BicyclingOn()', 'JavaScript')//Activate the Bicycling View option
else
HTMLWindow2.execScript('BicyclingOff()', 'JavaScript');//Deactivate the Bicycling View option
end;
procedure TfrmMain.CheckBoxTrafficClick(Sender: TObject);
begin
if CheckBoxTraffic.Checked then
HTMLWindow2.execScript('TrafficOn()', 'JavaScript')//Activate the Traffic View option
else
HTMLWindow2.execScript('TrafficOff()', 'JavaScript');//Deactivate the Traffic View option
end;
end.
August 7, 2010 at 11:32 pm
nice, thank you!
August 8, 2010 at 3:45 pm
Any thoughts on how to get travel distance between 2 locations?
August 9, 2010 at 6:02 pm
Being pretty terrible in javascript and I sometimes wonder about my abilities in Delphi, I know that when one views maps.google.com and then enters;
void(prompt(”,gApplication.getMap().getCenter()))
One will retrieve the latitude and longitude of the center of the shown map.
Played with this in Delphi and your sample code, and cannot get it towork. Ideally, it would be GREAT to show the lat and long in the tEdits in the form. Can any of this be done?
Thanks for the tutorial! Nice to start learning this stuff!
John J
August 14, 2010 at 5:51 pm
Thank you for this code,
I use delphi 2009 and I get a java script error when I run the program after I compile it.
Could you please help me ?
Do you already test you code with delphi 2009 ?
Thank you ,
August 14, 2010 at 6:47 pm
solux, the code was writen and tested in Delphi 2007, you must make only one small change to run this code in delphi 2009.
try changing this line
HTMLStr: String =to
const HTMLStr :AnsiString =August 15, 2010 at 1:53 pm
Hi Rodrigo,
Thanks a lot ! it work’s yet.
August 19, 2010 at 5:34 pm
Thanks a lot!
August 24, 2010 at 3:38 am
Run this code in Delphi2009
try changing this line
HTMLStr: String =
to
const HTMLStr :UTF8String =
Pingback: Anonymous
January 19, 2011 at 9:24 pm
Estimado, como siempre muy buenos artículos.
Le cuento, por cada búsqueda sale un marcador. ¿Como puedo eliminar o los marcadores anteriores en cada búsqueda o hacer que solo se muestre el último?.
De antemano muchas gracias
January 19, 2011 at 10:19 pm
MAXIUM, acabo de actualizar el proyecto . si lo descargas ahora podras ver que tienes la opcion “clear markers”, que limpia los marcadores de la pantalla. basicamente lo que se hace (en javascript) es crear una variable global (de tipo array) que contiene los marcadores y cuando se presiona el boton antes mencionado se limpia la variable, lo que hace desaparacer los marcadores. espero que te sirva.
Saludos.
January 20, 2011 at 11:16 am
Grandioso, excelente, que más decir.
Muchas gracias.
February 23, 2011 at 5:03 pm
Hi,
Good job and keep it up.
Trying to run the code and I got error of TwebBrowser is not found. Where can I find TwebBrowser component?
February 23, 2011 at 8:39 pm
Ade, which version of delphi are you using? the TWebBrowser component is a standard component included in the internet palette and is part of the SHDocVw unit.
February 24, 2011 at 6:02 pm
Rodrigo, Thanks for your response. I am using Delphi XE Stater. Now It seem like there is limitation of those components on Starter version.
February 24, 2011 at 6:04 pm
Rodrigo, Thanks for your response. I am using Delphi XE Stater. Now It seem like there is limitation of those components on Starter version.
Rodrigo, Thanks for your response. I am using Delphi XE Stater. Now It seem like there is limitation of those components on Starter version.
March 17, 2011 at 6:54 am
Very nice app.
Don’t manage to compile it as ShDocvw.dcu and MSHTML.dcu are not found. Ideas where to compile/get it ?
Otherwise, i would like to inject instamapper datas. Ideas how to do it ?
Thanks alot
March 17, 2011 at 10:45 am
Gwenael, which version of delphi are you using?
March 17, 2011 at 11:00 am
Delphi 7 personnal.
Have installed TWebBrower component but no way to find the needed dcu.
Just have emailed u
Thanks
March 26, 2011 at 10:18 am
Hi Rodrigo,
Thank you for the excellent tutorial. I am using Delphi 2010, there was an complication error at HTMLWindow2.execScript(). but it is fixed by edit code HTMLStr: String = to const HTMLStr :UTF8String
May 4, 2011 at 4:53 am
Nice tutorial … thanks.
I’ve noticed that the street view no longer works. (I think google has pushed a new version)
Any idea how to fix it?
I’ve been trying to add the doctype tag to the html, but still no joy.
May 4, 2011 at 1:56 pm
Mark, thanks for your comments, i just test the application and the street view works ok (the checkbox only show or hide the icon to activate the street view, you must drag and drop the person icon in the map to activate the street view), I made to a small change to the source code in order to deactivate the street view when the the application starts. try downloading again the source code, test and let me know the results.
May 17, 2011 at 5:39 am
This is a bug in the Google Maps API (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3272). See also article http://www.delphipraxis.net/1099848-post48.html (in German).
May 25, 2011 at 11:55 pm
Great sample Thx!!, Works fine on Delphi 7 :D
June 9, 2011 at 11:46 am
Any news about how to get distance between two adress and how to display marquers on the google map in Delphi ????
June 9, 2011 at 3:20 pm
try these links
Google Maps Javascript API V3 Geometry Library
Finding the distance between two points using the Google Maps API v3
June 24, 2011 at 11:59 am
Hi, seems to be a great application. Any idea how to convert a mouse click on the map into corresponding coordinates ? i.e. longitude and latitude of the point clicked ?
June 24, 2011 at 9:33 pm
I just wrote a new post about this check this link http://theroadtodelphi.wordpress.com/2011/06/24/using-the-google-maps-api-v3-from-delphi-%E2%80%93-part-iii-getting-the-latitude-and-longitude-of-a-mouse-click/
June 26, 2011 at 8:06 pm
Hi all,
For “Delphi7 users like me”, you simply make a little modification in the projects source “GoogleMapsTest.pas” :
program GoogleMapsTest;
uses
Forms,
fMain in ‘fMain.pas’ {frmMain};
{$R *.res}
begin
Application.Initialize;
//Begin
//Remove -or comment- the following line
Application.MainFormOnTaskbar := True;
//End
Application.CreateForm(TfrmMain, frmMain);
Application.Run;
end.
August 29, 2011 at 5:54 am
It’s Great!!!
I like it!
Thanks a lot!
November 19, 2011 at 3:24 am
Nice tutorial!
November 23, 2011 at 1:46 am
hi
Please send me source code (*.dpr — *..dproj) in email address
Please Hint me …
November 23, 2011 at 1:29 pm
The full source code is located here http://dl.dropbox.com/u/12733424/Blog/GoogleMapsTest.rar
December 5, 2011 at 3:43 pm
hi !
this is a great code. i am using delphi 7 Ent. Everything is running fine except one minor – big problem. i try to automatically go to an address (lat,lon) that is saved in a database, when the user opens a form with the map. When i use the code on ButtonGotoLocationClick on a Button, it is ok. when i try to do the same e.g. on a tab change, i get an error 80020101. anyone knows why?
December 22, 2011 at 4:34 am
MANTAP PISAN EUY, THANK U
December 30, 2011 at 4:07 am
Hi Rodrigo,
Hope you are planning to start using XE2.
Pingback: /*Prog*/ Delphi-Neftalí /*finProg*/ » Una quincena más… (11/04/2012)
June 8, 2012 at 2:29 pm
Thanks for this series of tutorials; they really help to explain the Delphi/Google workings. I have it running in both D7 and D5 (only three modifications). A question about clearing all the markers: After clearing, then adding a new marker, the sequence number starts at the highest previous number. Is there any way to initialize the marker to “number 1″ after clearing? Thanks for any help.
January 24, 2013 at 8:16 am
Rodrigo ante todo muy bueno lo tuyo, una consulta cuando agrego los marcadores le el titulo del mismo solo se ve con un hint , como se puede hacer para que aparesca como una etiqueta como esta en el earth.
Saludos.
January 30, 2013 at 3:55 pm
Hola Marcelo, me puedes dar un ejemplo (imagen) de lo que deseas realizar?
February 5, 2013 at 7:29 am
Hello Rodrigo
Any idea about using this wonderful tool behind a firewall.
What would be the entries (sites, URLs) to open on the firewall ?