[Google Maps] Expose the Google Map object for client javascript

[Google Maps] Expose the Google Map object for client javascript

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

The current version does not expose the Google Map object. Is there a plan to do so for future versions? If not, how to modify the current version to expose it?

Hey, Stanley,

If I understood you correctly, you want to access the Google Maps' Map JS object that is created using the JS API, right?

Well, the component has a osGoogleMap object available, that contains references to all Maps/Markers/Events we create with the component. Each of these includes a reference to the respective Google Maps API object you are looking for. In case of Maps, you should be able to obtain it like so:

var googlesMap = osGoogleMap.getMap(<MapIdentifier>).gMap;

However, the osGoogleMap object mentioned above is not available through the console directly. To be able to reach it, you should use the platform's "RunJavaScript" action to run your code (instead of using unescaped expressions).

Is this what you were looking for? Please let us know how thing's went :).

Best regards,

Carlos Simões

Solution

Here is an example of interacting with the map using "RunJavaScript".

"(function() {

    var MapId = "+ TestMap.Id +";
    var MarkerId = "+ TextMarker.Id +";

    var TempMap = osGoogleMap.getMap(MapId).gMap;

    var TempMarker = osGoogleMap.getMap(MapId).getMarker(MarkerId).gMarker;

    TempMap.setZoom(12);

    TempMap.setCenter(TempMarker.getPosition());

})();"

There is a quirk in how you access the marker in that you have to instantiate it directly and not via the map object.

Ouen

Solution

Spot on, Ouen! That's exactly what I was aiming for!

I'd just add (I forgot to mention on my post also) that where you have TestMap.Id and TestMarker.Id, that those are the names we gave the markers, like so:

Thank you for sharing the example!

Excellent! Thanks for Ouen's example and Carlos explanation. This exactly what I am looking for.

Many thanks.


Hi all,

just to thanks Ouen and Carlos the explanation! 

Help me a lot to integrate the Google API's from OS with other Google API JS codes.

Great job! Thanks!

Cheers


No problem, Gonçalo!

We aimed right from the start to have the component as open and extensible as possible, allowing people to implement custom scenarios alongside the more streamlined use-cases.

Feel free to reach out if you need help on something else or have suggestions.

Best regards,

Carlos

Hi Guys,

Please give some more details because I couldn't get it right:

On module GoogleMapsDemo, web screen MultipleMarkers, I tried to access some of the properties of the MultipleMarkersMap widged

I want to get the NortEast and SouthWest corners of the map bounds and display the coordinates on the web screen

First I added dependency to (System) HTTPRequestHandler.ServerActions.RunJavaScript as suggested in the solution

Second I used the part of JS code above, but had to add extra quotes so the system could select the map

var MapId = """+ MultipleMarkersMap.Id +""";

And then I hit the problem of passing data from the script

Can you suggest a solution?

Where to define the script - only the Server Actions allow defining Output parameters, and how to code them inside the script?

Is there another way of getting data from the script?

Thank you in advance!

Please disregard my previous post, here I'll describe a working solution.

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