.Net windows application WebBrowser / Google Maps API v3

Question

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>

social.msdn.microsoft.com/Forums/en-US/vssmartdevicesvbcs/… — Jeremy Thompson
– Jeremy Thompson, Commented Jul 31, 2012 at 23:25

Jones · Accepted Answer · 2012-08-04 17:14:06Z

1

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.

edited Aug 4, 2012 at 17:14

answered Jul 29, 2012 at 2:42

Jones

1,50019 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

TopoX Over a year ago

i have tried your solution but i get the error "An Error has occurred in the script on this page.", is there a way to get the code not in a single line but separate it ? the original code im getting it from is

TopoX Over a year ago

www2.zshare.ma/enyv1gb400gq thats the fullcode from the html i got it from.

Jones Over a year ago

@TopoX I correct code. Comma is worng in address. Apparently code is OK now.

TopoX Over a year ago

i still cant figure how to run this on the .net webbrowser control

Jones Over a year ago

@TopoX the onload script is not running?

|

Collectives™ on Stack Overflow

.Net windows application WebBrowser / Google Maps API v3

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related