How To Update Xojo Objects From HTML/Javascript

Targets Web
1

Hello Guys,

I am making a simple web map application using google api through javascript housed in a HTMLViewer. The pin locator is draggable. I already created an event listener but I don’t know how to update the coordinate boxes on top after the marker is dragged.

image_2021-06-19_161556
image_2021-06-19_161556666×1834 278 KB

The code should be on the lines where I commented them.

xMap = xMap + "google.maps.event.addListener(vMarker, 'dragend', function (evt) {"
//xMap = xMap + "document.getElementById('" + TextFieldLat.ControlID + "').Val(evt.latLng.lat().toFixed(6));"
//xMap = xMap + "document.getElementById('" + TextFieldLong.ControlID + "').Val(evt.latLng.lat().toFixed(6));"

xMap = xMap + "map.panTo(evt.latLng);"
xMap = xMap + "});"

Links to past sample projects in this forum are all dead so I cannot find a a good guide. The WebSDK is a bit heavy for me now although I am eager to learn it in the near future.

I am attaching mine but you cannot run this from the get go as it needs your own google API key. If you have, please, enter yours in mobContainerMap APIKey property default value. Thank you so much.

https://drive.google.com/file/d/15z-ciXesPTwRC3RsuKU0DjMoluKdkg8m/view?usp=sharing

2

Is this a Web project or a Desktop project?

3

Hi Greg. It’s Web 1.0.

4

I made some changes on my approach to this case. Instead of Javascript updating my Xojo controls, I made it the other way around. So;

Before: The coordinate textboxes (lat-long) are Xojo’s and the map is HTML/JS.
Objective: When the marker is dragged, Xojo’s lat-long textboxes should get the update. I’m having difficulty implementing this.

Now: The coordinate textboxes are included in HTML/JS.
Objective: On Xojo, a button triggers an ExecuteJavascript to get the value of JS’ textboxes and store their values to another Xojo control or a property. I was able to do this using WebControlWrapper as discussed in the book of Eugene Dakin, I Wish I Knew How To Program HTML, CSS, and JavaScript with Xojo. However, I could not display the map. I don’t know where to put these lines:

<head>
<title>Google Maps Drag Marker Get Coordinates</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GoogleAPIKey"></script>
<script type="text/javascript">
    function initialize() {
        // Creating map object
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 20,
            center: new google.maps.LatLng(1.06709646e+1, 1.229944636e+2),
            mapTypeId: google.maps.MapTypeId.HYBRID
        });
        // creates a draggable marker to the given coords
        var vMarker = new google.maps.Marker({
            position: new google.maps.LatLng(1.06709646e+1, 1.229944636e+2),
            draggable: true,
	title: 'here'
        });

vinfowindow = new google.maps.InfoWindow({content:‘You can drag me.’,maxWidth: 200});

vinfowindow.open(map,vMarker);

        // adds a listener to the marker
        // gets the coords when drag event ends
        // then updates the input with the new coords
        google.maps.event.addListener(vMarker, 'dragend', function (evt) {
            $('#txtLat').val(evt.latLng.lat().toFixed(6));
            $('#txtLng').val(evt.latLng.lng().toFixed(6));

document.title = $(’#txtLng’).value;
map.panTo(evt.latLng);
});
// centers the map on markers coords
map.setCenter(vMarker.position);
// adds the marker on the map
vMarker.setMap(map);
}

image
image1366×1064 33.7 KB

Hope someone can pitch in to help. Thank you!

6

I solved this issue. I abandoned the WebControlWrapper and went back to HTMLViewer instead. For the following reasons:

  • I don’t know where are the parts of my HTML codes are being placed when using the WebControlWrapper control at run-time because the HTML body and head have separate locations.

  • I need to dynamically reposition the size of the map view for desktop and mobile use. WebControlWrapper only loads the html content once during the Open event, whereas, the extraction and manipulation of html can be placed in the Resized event of the HTMLViewer.

My Solution: HTML/Javascript + cookies. Writing to cookies using JS and retrieving cookies using ExecuteJavascript in Xojo.

If anyone who’s interested with the sample project, just let me know thru this thread. Thank you all.

1 Like