[Google Maps] google map web: passing coordinates from clicking on map to local variables

[Google Maps] google map web: passing coordinates from clicking on map to local variables

  
Forge Component
(18)
Published on 24 Apr by OutSystems Labs
18 votes
Published on 24 Apr by OutSystems Labs

Dear all

Building an Web APP I need to record new points from clicking on the map. Therefore I need to pass the coordinates clicked on the map to local variables or directly to my entity record. In WEB environment I tried to combine the method describe here below by George Pavlov and the mouseEvent object but I got nowhere.. George's code works fine  course but I need to pass the clicked coordinates instead of the bounds and I clearly miss a crucial step here..

I suppose that I'm not the first one trying to create record coordinates from clicking on the maps, so I suppose that this is a child game for you guys. Thanks for sharing!


Pierre


Exemple found in the forum: (thanks to George Pavlov)


Goal: Get the bounds coordinates from the map object, created in module GoogleMapsDemo, web screen MultipleMarkers, and save them in Local variable for use by other elements on the page.

It's based on the example from http://www.outsystems.com/forge/component-versions/990/JavaScript+Demo+(How-To), the JSResult web screen, where the JS script, defined in the JavaScript property, is returning value, which is passed by JS script, defined in "onclick" extended property of the Button "Send JS ...", to JSValue local variable via the ResultInput input widget.

Solution:


1. Define a JS script function GetNESWbounds in the JavaScript property of MultipleMarkers web screen:

function GetNESWbounds(MapId)
{
    var tMap = osGoogleMap.getMap(MapId).gMap;  
    var tBounds = tMap.getBounds();
    var tNE = tBounds.getNorthEast().toString();
    var tSW = tBounds.getSouthWest().toString();  
    return "NE:" + tNE + " SW:" + tSW;
}

2. Define JS script

"document.getElementById('" + ResultInput.Id + "').value = GetNESWbounds('" +  MultipleMarkersMap.Id + "'); return true;"

in extended property "onclick" of a button for calling the GetNESWbounds function, with the map's id as parameter.

The map's bounds coordinates are passed to MultipleMarkers's local variable, specified in property Variable (holding the user input) of a input widget ResultInput

Result:

The pasted code is working and displays the map's coordinates in the input widget:
NE:(50.20259832102659, 4.309890833398413) SW:(50.11461646483168, 4.151962366601538)

Best regards


Solution

Hi Pierre,

As i understand you need to send the coordinates of the clicked point on the map to the server.


For this you need the map block, followed by the 'AddMapEvent' block and the 'FakeNotifyWidget' block, like the pic below

The 'AddMapEvent' block need the following inputs:

  • MapId (your map instance identifier)
  • TriggeringEvent (what event you need to trigger, in this case the click event)
  • Handler (the handler for the event, in this case de JS function bellow)

SyntaxEditor Code Snippet

"function(event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    OsNotifyWidget('" + ClickedCoordinatesNotify.Id + "', 'latitude:' + lat + '|longitude:' + lng);
};"

 The 'FakeNotifyWidget' needs to have:

  • a name (in this case 'ClickedCoordinatesNotify' to be used in the JS handler)
  • on the 'OnNotify destination' a server action ('OnClickedCoordinatesNotify') to handle the notify


Finally the 'OnClickedCoordinatesNotify' needs to call the 'NotifyGetMessage' system action to get the notify message with the coordinates, you can now add your own logic.

Let me know if you have any questions.


Thanks,

Hugo

Solution

ok, it works fine....! 

So many thanks.... great product, great team...!

WBR

Pierre