Click here to Skip to main content
15,887,435 members
Search within:


google.maps.event.addlistener and window.external vb.net
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi, I have some problems with some code that I'm working. I'm not a good programmer, I'm a geologist with a few knowledge of programming... So any help would be appreciated.

I have a webbrowser control that shows a html code using Google Maps API. What I need to do is to extract the coordinates (lat-lng) from the place I've clicked on the webbrowser control.

I'm ussing VB.NET with VS2015 and .NET Framework 4.5.2

The HTML code is:
JavaScript
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Poligonal - Vista previa</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

var latitud
var longitud
var latylong

function coordGoogle(str) {
 window.external.coordGoogle(str);
}   

function Map_Click(e){
    latitud = e.latLng.lng();
    longitud = e.latLng.lng(); 
    latylong =  latitud + " " + longitud;
    coordGoogle(latylong);
}

function initMap() {
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(new google.maps.LatLng(-57.9273407169989, -34.9455780254582));
  bounds.extend(new google.maps.LatLng(-57.9280791179909, -34.9463018545704));
  var nuevoZoom = getBoundsZoomLevel(bounds, 630, 740);

  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: nuevoZoom,
      tilt: 0,
      mapTypeId: "hybrid",
      center: {lat: -34.945932129038, lng: -57.9277009575209 }
  });

  setMarkers(map);

google.maps.event.addListener(map, 'click', Map_Click);

}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var puntos = [["E1", -34.9456863703928, -57.9279809728952, 0],["E2", -34.9455780254582, -57.9276547821795, 1],["E3", -34.9461597123083, -57.9273407169989, 2],["E4", -34.9463018545704, -57.9275503647045, 3],["E5", -34.9459350794102, -57.9279876151491, 4],["E1'", -34.9457038384157, -57.9280344515735, 5]];

//Esta funcion ajusta el zoom a los datos
//Extraido de http://stackoverflow.com/questions/6048975/google-maps-v3-how-to-calculate-the-zoom-level-for-a-given-bounds

function getBoundsZoomLevel(bounds, mapHeight, mapWidth) {
    var WORLD_DIM = { height: 256, width: 256 };
    var ZOOM_MAX = 21;

    function latRad(lat) {
        var sin = Math.sin(lat * Math.PI / 180);
        var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
        return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
    }

    function zoom(mapPx, worldPx, fraction) {
        return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
    }

    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();

    var latFraction = (latRad(ne.lat()) - latRad(sw.lat())) / Math.PI;

    var lngDiff = ne.lng() - sw.lng();
    var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;

    var latZoom = zoom(mapHeight, WORLD_DIM.height, latFraction);
    var lngZoom = zoom(mapWidth, WORLD_DIM.width, lngFraction);

    return Math.min(latZoom, lngZoom, ZOOM_MAX);
}

function setMarkers(map) {
  // Adds markers to the map.

    for (var i = 0; i < puntos.length; i++) {
        var punto = puntos[i];
    var marker = new google.maps.Marker({
        position: { lat: punto[1], lng: punto[2] },
      map: map,
      icon: new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + punto[0] + "|FC6254|000000"),
      title: punto[0],
      zIndex: punto[3]
    });
  }
}

</script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
  </body>
</html>


And the VB.NET code is:
VB
Imports System.Security.Permissions

<PermissionSet(SecurityAction.Demand, Name:="FullTrust")>
<System.Runtime.InteropServices.ComVisibleAttribute(True)>
Public Class mainForm
    
    Private Sub mainForm_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        WebBrowser1.ObjectForScripting = Me
    End Sub

    Public Sub coordGoogle(ByVal latlng As String)
        MsgBox(latlng)
    End Sub

End Class


So, when I click on the webbrowser, nothing happens. The "coordGoogle" sub does not run. I simply don't understand what is wrong. If I save the HTML code as html file and I open with a common browser (I use Firefox), I can debug the code and I see that lat-lng string is passed to coordGoogle function, so I don't know why the "coordGoogle" sub does not run.

Can you help me with this? Thanks!

joaco

PS: sorry for my english
Posted
Add a Solution
Comments
Richard Deeming 3-Feb-16 12:03pm    
There's a typo in your script - the Map_Click method calls e.latLng.lng() twice. I suspect the first call should be e.latLng.lat() instead.

I've just tried your code, and the external method call works perfectly. However, there is a script error from Google when the page first loads. I suspect this is because the WebBrowser control is pegged to IE7 compatibility mode by default, and Google no longer support IE7. Changing that requires editing the registry:
Web Browser Control – Specifying the IE Version[^]
Joaquin Nigro 3-Feb-16 14:36pm    
Hi Richard! Thanks you!

I tested the code on a new project and works fine! But on the original project still not working. I will still looking for a solution... if I find something I will post it

I want to break my head on the wall :(

Thank you again!

1 solution

Finally, I found what was wrong with the code! In VB, there is a subroutine that generates some parts of javascript code, especifycally two variables called "puntos" and "puntos2". On the original post I simplified the javascript code for better reading, thinking that this code was fine...

The "puntos2" variable have and extra comma at the end, and this extra comma was blocking the window.external process.

So, the final javascript code is this:
JavaScript
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Poligonal - Vista previa</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </meta></meta></head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

var latitud
var longitud
var latylong

function coordGoogle(str) {
 window.external.coordGoogle(str);
}   
 
function Map_Click(e){
    latitud = e.latLng.lat();
    longitud = e.latLng.lng(); 
    latylong =  latitud + " " + longitud;
    coordGoogle(latylong);
}

function initMap() {
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(new google.maps.LatLng(-57.9273407169989, -34.9455780254582));
  bounds.extend(new google.maps.LatLng(-57.9280791179909, -34.9463018545704));
  var nuevoZoom = getBoundsZoomLevel(bounds, 630, 740);

  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: nuevoZoom,
      tilt: 0,
      mapTypeId: "hybrid",
      center: {lat: -34.945932129038, lng: -57.9277009575209 }
  });

  

  setMarkers(map);
  setMarkers2(map);

  google.maps.event.addListener(map, 'click', Map_Click);

}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var puntos = [["E1", -34.9456863703928, -57.9279809728952, 0],["E2", -34.9455780254582, -57.9276547821795, 1],["E3", -34.9461597123083, -57.9273407169989, 2],["E4", -34.9463018545704, -57.9275503647045, 3],["E5", -34.9459350794102, -57.9279876151491, 4],["E1'", -34.9457038384157, -57.9280344515735, 5]];
var puntos2 = [["1", -34.9458646104288, -57.9277684856222, 1],["2", -34.9458301555346, -57.9276848953222, 2],["3", -34.9456424949709, -57.9278302365446, 3],["4", -34.9456477344085, -57.9277152389542, 5],["5", -34.945722286851, -57.9276564071297, 6],["6", -34.9457875635967, -57.927589118614, 7],["7", -34.9460946833933, -57.9274513093932, 9],["8", -34.9461634761396, -57.9273884621752, 10],["9", -34.9461678758456, -57.9274442738932, 11],["11", -34.9462280721616, -57.9274975162208, 13],["12", -34.9459700858821, -57.9276543326257, 14],["22", -34.9462239845672, -57.927710713715, 15],["14", -34.9459218009585, -57.9278793037058, 17],["15", -34.9459862149622, -57.9278217925306, 18],["17", -34.9459587895424, -57.9280791179909, 19]];

//Esta funcion ajusta el zoom a los datos
//Extraido de http://stackoverflow.com/questions/6048975/google-maps-v3-how-to-calculate-the-zoom-level-for-a-given-bounds

function getBoundsZoomLevel(bounds, mapHeight, mapWidth) {
    var WORLD_DIM = { height: 256, width: 256 };
    var ZOOM_MAX = 21;

    function latRad(lat) {
        var sin = Math.sin(lat * Math.PI / 180);
        var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
        return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
    }

    function zoom(mapPx, worldPx, fraction) {
        return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
    }

    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();

    var latFraction = (latRad(ne.lat()) - latRad(sw.lat())) / Math.PI;

    var lngDiff = ne.lng() - sw.lng();
    var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;

    var latZoom = zoom(mapHeight, WORLD_DIM.height, latFraction);
    var lngZoom = zoom(mapWidth, WORLD_DIM.width, lngFraction);

    return Math.min(latZoom, lngZoom, ZOOM_MAX);
}

function setMarkers(map) {
  // Adds markers to the map.

    for (var i = 0; i < puntos.length; i++) {
        var punto = puntos[i];
    var marker = new google.maps.Marker({
        position: { lat: punto[1], lng: punto[2] },
      map: map,
      icon: new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + punto[0] + "|FC6254|000000"),
      title: punto[0],
      zIndex: punto[3]
    });
  }
}

function setMarkers2(map) {
  // Adds markers to the map.

    for (var i = 0; i < puntos2.length; i++) {
        var punto = puntos2[i];
    var marker = new google.maps.Marker({
        position: { lat: punto[1], lng: punto[2] },
      map: map,
      icon: new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/shapes/placemark_circle.png"),
      title: punto[0],
      zIndex: punto[3]
    });
  }
}

    </script>
    <script async="" mode="hold" />        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap">
  </body>
</html>


The end of "puntos2" was like "....19],];" and now is "....19]];". I feel so stupid. And sorry for waste your time!

Thanks

joaco
 
Share this answer
 
Posted
Comments
Richard Deeming 4-Feb-16 10:48am    
You're missing semi-colons from the declaration of the three global variables (latitud, longitud and latylong).

But, since those variables are only used within the Map_Click function, it would be better to declare them within that function.

Trailing commas in arrays and object literals were always a problem for Internet Explorer prior to v9. They're perfectly valid according to the specification, but older versions of IE didn't support them. Since the WebBrowser control is forced into IE7 mode, your script has to work with the limitations of this ancient version. :)
Joaquin Nigro 5-Feb-16 8:44am    
Yes, you're right. Anyway, I simplified the code deleting Map_Click function and the three global variables.

I replaced all this:

var latitud
var longitud
var latylong

function coordGoogle(str) {
window.external.coordGoogle(str);
}

function Map_Click(e){
latitud = e.latLng.lat();
longitud = e.latLng.lng();
latylong = latitud + " " + longitud;
coordGoogle(latylong);
}

google.maps.event.addListener(map, 'click', Map_Click);


With this:

google.maps.event.addListener(map, 'click', function(event) {
window.external.coordGoogle(event.latLng.lat(), event.latLng.lng());
});


Other thing, I tried to emulate IE9, according your first comment, but the script's errors still happens. So, only solution for this (for now) is to set "ScripErrorsSuppressed" to true.

Thank you so much!
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Ny alternate solution for window.external
In VB.NET javascript issue in geckowebbrowser
Web Browser control window.external always returns exception
Install RDLC for VB.NET
Vb.net and newtonsoft json
Vb.net backgroundworker failing
unlock a file in vb.net that was locked by system or another vb.net app
Which client-server technology for VB.NET?
Vba sendmessage to VB.NET app
Converting Delphi Comport Code to Vb.net

Advertise
Privacy
Cookies
Terms of Use
Last Updated 4 Feb 2016
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web02 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900