Google Maps in a TWebBrowser from Delphi, Part 2
I received an email about my first Google Maps in a TWebBrowser post asking how to remove the white border around the map, in order to let the GoogleMap fill the whole area of the TWebBrowser.
The white border is simply the default margin of the body of the document. Adding style=”margin:0″ to the <body> tag will push the map to the upper left (so changing the original example, the new line will be “<body onload=”load()” onunload=”GUnload()” style=”margin:0″>”).
Allowing the map to fill the whole TWebBrowser is a little more involved.
In order for a <div> to display a google map, it must have a height or width in pixels. So change the html to have width: 100% for the <div id=”map” …>.
We can’t put height: 100% into the style also, because the map will not display. One way to have the map fill the TWebBrowser is to add a Form.OnResize event handler, and use some javascript to resize the <div>. After the WBLoadHTML in FormCreate, add a call to FormResize(Sender) so the map will be full size after it is loaded initially. Then the map will take up the entire size of the TWebBrowser.
procedure TfrmMain.FormResize(Sender: TObject);
var
newMapHeight: Integer;
script: String;
begin
if Visible then
begin
while WebBrowser1.ReadyState < READYSTATE_COMPLETE do
Forms.Application.ProcessMessages;
end;
newMapHeight := WebBrowser1.ClientHeight -
(4 * GetSystemMetrics(SM_CYBORDER));
script :=
'if (document) { ' +
' if (document.body) { ' +
' var m = document.getElementById("map"); ' +
' if (typeof(m) != "undefined") { ' +
' m.style.height = ' + IntToStr(newMapHeight) + '; ' +
' } ' +
' } ' +
'} ';
(WebBrowser1.Document as IHTMLDocument2).
parentWindow.execScript(
script,
'JavaScript'
);
end;
Thanks.
Jason,
hello from Germany.
I just found and tested your demo prog. Congratulations and thank you for this. That’s what i was looking for. It even works fine with Delphi 5.
We’re writing a software for container truckers and the office staff now want to see geo positions of their trucks.
As i’m not experienced with java, it would be nice to have additional solutions from you for:
1. to create markers in different colours
2. to remove a marker
3. to show a hint window when clicking on a marker
Waiting for your code snippets i wish you a Happy New Year
Nils
Hello Jason,
Thank you for the example, excellent one.
I am going to use in my application.
Good to know, that there are still some shops in NY using Delphi.
Chris, New Jersey
Hi,
thanks a lot four the google map samples.
Is it possible to get information about the users position by the “my location” functionality? This would be really helpfull to me.
Thanks,
Kind regards,
Achim
I don’t know specifically, but the “my location” feature is new, and I can’t find much information on it. You might be able to use the existing feature “ClientLocation” which uses a geo lookup of the IP address using the google APIs.