I have this JS code which I use to display both street view and google maps in my form:
/*
* Click the map to set a new location for the Street View camera.
*/
var icon;
var markers = [];
var currentmarker;
var geocoder, infowindow;
var map;
var panorama;
var sv;
function initMap() {
var berkeley = { lat: 39.277782, lng: -7.428514 };
sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map.
map = new google.maps.Map(document.getElementById('map'), {
center: berkeley,
zoom: 17,
streetViewControl: false
});
sv.getPanorama({ location: berkeley, radius: 70 }, processSVData);
geocoder = new google.maps.Geocoder;
infowindow = new google.maps.InfoWindow;
map.addListener('click', function (event) {
sv.getPanorama({ location: event.latLng, radius: 70 }, processSVData);
});
document.getElementById('submit').addEventListener('click', function () {
var input = document.getElementById("resulttest"); /*latlng*/
var latlngStr = input.value.split(',', 2);
geocodeLatLng(latlngStr);
});
// Set the initial Street View camera to the center of the map
// Look for a nearby Street View panorama when the map is clicked.
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
}
function geocodeLatLng(latlngStr) {
// var input = document.getElementById("resulttest"); /*latlng*/
latlngStr = latlngStr.split(',', 2);
var latlng = { lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1]) };
geocoder.geocode({ 'location': latlng }, function (results, status) {
if (status === 'OK') {
if (results[1]) {
center: latlng,
map.setZoom(20);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
markers.push(marker);
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
sv.getPanorama({ location: latlng, radius: 70 }, processSVData);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
function processSVData(data, status) {
if (status === 'OK') {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
markers.push(marker);
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
marker.addListener('click', function () {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID.
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
console.error('Street View data not found for this location.');
}
}
function OnclickMarker(data, status) {
if (status === 'OK') {
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
} else {
console.error('Street View data not found for this location.');
}
}
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
function clearOverlays() {
setMapOnAll(null);
}
function showMarkers() {
setMapOnAll(map);
}
function criarMarker(id, lat, lon) {
alert(id + ' ' + lat + ' ' + lon);
var LatLng = { lat: lat, lng: lon };
var marker = new google.maps.Marker({
id: id,
position: LatLng,
map: map
});
google.maps.event.addListener(marker, 'click', function () {
this.setIcon('https://www.google.com/mapfiles/marker_green.png');
sv.getPanorama({ location: LatLng, radius: 70 }, OnclickMarker);
if (currentmarker != null) {
currentmarker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
panorama.setPov({
heading: 165,
pitch: 0
});
}
currentmarker = this;
//alert(lat);
//var evente = document.createEvent('MessageEvent');
// var origina = window.location.protocol + '//' + window.location.host;
//evente = new MessageEvent('jsCall', { 'view': window, 'bubbles': false, 'cancelable': false, 'data': 'criarMarker' });
//document.dispatchEvent(evente);
var evente = document.createEvent('MessageEvent');
var origina = window.location.protocol + '//' + window.location.host;
evente = new MessageEvent('jsCall', { 'view': window, 'bubbles': false, 'cancelable': false, 'data': id });
document.dispatchEvent(evente);
});
}I would like to call function "criarMarker" and that little guy "jscall", but I am not able to do it. Tried using: browser.ExecuteJavaScript("criarMarker('" + item.id + "'," + item.lat + "," + item.lon + ");"); and when I run the program it shows the output in image:
but doesn't add the markers in the map. Any ideas? Appreciate the effort!
EDIT Plus Info: According my answer I'm actually in need of help calling "jsCall", previously I used geckobrowser and used "AddMessageEventListener" in my c#, but now its seems that I cannot call it geckoWebBrowser1.AddMessageEventListener("jsCall", (id) => this is what I used in my previous code.
Another Edit: I changed the last 4 lines of my JS to make it a function and now looks like this:
function newFunction(evente, id) {
evente = new MessageEvent('jsCall', { 'view': window, 'bubbles': false, 'cancelable': false, 'data': id });
return evente;
Also if this is confusing the whole point is when I press the marker it changes my dgv row. But nothing is really happening and I really don't know why, my code for the dgv is this one:
int rowindex = -1;
dataGridView1.SelectionMode = DataGridViewSelectionMode.FullRowSelect;
foreach (DataGridViewRow row in dataGridView1.Rows)
{
if (row.Cells["Edificio_cad"].Value.ToString().Equals(id))
{
rowindex = row.Index;
dataGridView1.Rows[rowindex].Selected = true;
dataGridView1.FirstDisplayedScrollingRowIndex = rowindex;
//MessageBox.Show(edificios);
//Console.WriteLine(edificios);
MessageBox.Show(lat);
return;
}
else
{
//dataGridView1.ClearSelection();
}
}
Appreciate all the help.
