I'm writing a VB.NET software application in which I want to plot some placemarks on a google map which is in a webbrowser control in the application.

weburl = applicationpath & "/googlemaps.html"
WebBrowser1.Navigate(weburl)

To accomplish this I call a javascript function from VB.net in this button event:

 Private Sub Button1_Click_1(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Me.WebBrowser1.Document.InvokeScript("initialize")

        Me.WebBrowser1.Document.InvokeScript("markerplace")
    End Sub

As you can see I call a javascript function which is in a page called: "googlemaps.html". The code of this page is as followed ( I removed the API key):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="thrColAbsHdr.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=""&sensor=false"></script>


<script type="text/javascript">

  var myplacemarks = new Array();
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var chicago = new google.maps.LatLng(41.850033, -87.6500523);
            var mapOptions = {
                zoom: 3,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: chicago
            }
            map = new google.maps.Map(document.getElementById('mainmap'), mapOptions);
            directionsDisplay.setMap(map);
        }

function markerplace(){
addMarker('41.850033, -87.6500523');
 alert("Hello world");
}



function addMarker(location) {
var latlng = new google.maps.LatLng(location);
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
    }



  function placeMarker(location) {
  var latlng = new google.maps.LatLng(location);
                var mytitle = location.toString();
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: mytitle
                });

                google.maps.event.addListener(marker, 'click', function (event) {
                   marker.title.toString
                });                
        }


    function showJavascriptHelloWorld() {
        alert("Hello world");
    }



</script>
</head>

<body onload="initialize()" style="width:800px; height:600px">
<div id="mainmap" style="width:800px; height:600px">

    </div>
</body>
</html>

So now the problem is that when I run the code and call the Javascript function: 'markerplace' there is no placemark shown in my google maps.

But when I setup the function: 'addMarker' like this....:

function addMarker() {
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
    }

...and call this function directly from vb.net like this.....

 Me.WebBrowser1.Document.InvokeScript("addMarker")

... then the placemarker is correclty plotted in the map. But now the problem is also that I want to pass arguments to the function directly from vb.net like this:

Me.WebBrowser1.Document.InvokeScript("addMarker", New String() {"41.850033, -87.6500523"})

To make this work the addmarker function should of course be written like this:

 function addMarker(location) {
    var latlng = new google.maps.LatLng(location);
            marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
        }

But somehow this also doesn't work!
Does anybody notice a problem in the way I pass the location variable in the addmarker code? Maybe I should not call the function addmarker like this:

addMarker('41.850033, -87.6500523');

But like this?:

 addMarker("41.850033, -87.6500523");

If anybody sees the problem I would love to hear it.

TnTinMN commented: nicely stated question +6

Recommended Answers

All 3 Replies

First off, thankyou for a well written question. These are so rare in this forum.

Second, I have never done what you are doing, but I have read on it, so take my advice with a grain of salt.

Me.WebBrowser1.Document.InvokeScript("addMarker", New String() {"41.850033, -87.6500523"})

I believe that you may need to pass your string in an Object array instead of the string array.

From the documentation: http://msdn.microsoft.com/en-us/library/4b1a88bz.aspx

Private Sub InvokeTestMethod(ByVal Name As String, ByVal Address As String)
    If (Not (WebBrowser1.Document Is Nothing)) Then 
        Dim ObjArr(2) As Object
        ObjArr(0) = CObj(New String(Name))
        ObjArr(1) = CObj(New String(Address))
        WebBrowser1.Document.InvokeScript("test", ObjArr)
    End If 
End Sub

Thanks a lot you brought me on the right track and now it works!

So the code in the button event is now as followed:

Private Sub Button1_Click_1(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        InvokeTestMethod("41.850033", "-87.6500523")
    End Sub

As you can see I call your method from this event which i have rewritten like this:

Private Sub InvokeTestMethod(ByVal Latitude As String, ByVal Longtitude As String)
        If (Not (WebBrowser1.Document Is Nothing)) Then
            Dim ObjArr(1) As Object
            ObjArr(0) = CObj(New String(Latitude))
            ObjArr(1) = CObj(New String(Longtitude))
            WebBrowser1.Document.InvokeScript("addMarker", ObjArr)
        End If
    End Sub

The method above then calls the following javascript function:

function addMarker(lat, long) {
 window.alert("lat is " + lat + "; long is " + long);

var latlng = new google.maps.LatLng(lat, long);
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
    }

So basically I did not pass in the coordinates in the right value format. It should excist of both a latitude and a longtitude value ( two seperate values instead of one string).

Thanks again for your help.

I'm glad it is working. One comment: Drop the type conversions, they are not necessary and the "New String" is a waste of resources.

ObjArr(0) = CObj(New String(Latitude))

becomes

ObjArr(0) = Latitude

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.