I'm developing an application in which the user will be able to enter a desired address and then press a button. This address will be found on the WebBrowser control in a .net windows application. I know that you can run javascripts on WebBrowser by using the WebBrowser1.DocumentText, and the calling the script by WebBrowser1.Document.InvokeScript ...
I'm having little issues with this and I was wondering if someone could show me the right way in order to do it.
CODE:
Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
Dim AddressMap As String
AddressMap = AddressM.Text
WebBrowser1.DocumentText = "<html><head><meta name='viewport' content='initial-scale=1.0, user-scalable=no' />" & _
"<script type='text/javascript' src='http://maps.google.com.mx/maps/api/js?sensor=true&language;=es'></script>" & _
"<script type='text/javascript'>" & _
"var geocoder; var map;" & _
"function initialize() " & _
"{geocoder = new google.maps.Geocoder(); var myOptions = { zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP()" & _
"} var(address = " & AddressMap & ")" & _
"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 {" & _
"}});" & _
"map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);}" & _
"</script></head><div id='map_canvas' style='width:100%; height:100%'></div></body></html>"
WebBrowser1.Document.InvokeScript("Initialize")
End Sub
below is another piece of code that i think should work but i still get an script error "An error has occured in the script on this page" Line 1 CHar 124 Error Expected ';' Code 0 URL about.blank
WebBrowser1.DocumentText = "<html><head><script type='text/javascript' src='http://maps.google.com.mx/maps/api/js?sensor=false&language;=es'></script> " +
"<script type='text/javascript'> " +
"var geocoder; " +
"var map; " +
"function initialize(address) { " +
"geocoder = new google.maps.Geocoder(); " +
"var myOptions = { zoom: 16 } " +
"geocoder.geocode({ 'address': address }, function (results, status) { map.setCenter(results[0].geometry.location); " +
"var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); " +
"map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); " +
"} " +
"</script> " +
"</head> " +
"<body> <div id='map_canvas' style='width:100%; height:100%'></div> </body> </html>"
WebBrowser1.Document.InvokeScript("initialize", New String() {AddressM.Text})
i greatly appreciate the help
Leo P.
this is another piece of code slightly different that the previous two, it includes and if else statement pulled out from a html that actually runs the google maps script.
WebBrowser1.DocumentText = "<html><head><script type='text/javascript' src='http://maps.google.com.mx/maps/api/js?sensor=false&language;=es'></script> " +
"<script type='text/javascript'> " +
"var geocoder; " +
"var map; " +
"function initialize() { " +
"geocoder = new google.maps.Geocoder(); " +
"var myOptions = { zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP } " +
"var(address = 'Miami Beach, Flordia') " +
"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 !);}}); " +
"map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); } " +
"</script> " +
"</head> " +
"<body> <div id='map_canvas' style='width:100%; height:100%'></div> </body> </html>"
WebBrowser1.Document.InvokeScript("initialize")
html code below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true&language=es"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//var address = document.getElementById("address").value;
var address = "Miami Beach, Flordia" //change the address in order to search the google maps
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);
}
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Putting solution
HTML
Create page html in C:\page.html and using this code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true&language=es"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize(address) {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
geocoder.geocode({ 'address': (address ? address : "Miami Beach, Flordia")}, 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);
}
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Windows Form - C#
private void Form1_Load(object sender, EventArgs e)
{
// Put uri (http://www.example.com/page.html and c:\page.html is valid address)
webBrowser1.Url = new Uri(@"C:\page.html");
}
private void button1_Click(object sender, EventArgs e)
{
webBrowser1.Document.InvokeScript("initialize",
new string[] { textBox1.Text });
}
and need form with this component with this names: textBox1, button1 and webBrowser1.
来源：https://stackoverflow.com/questions/11705729/net-windows-application-webbrowser-google-maps-api-v3