155
Views
16
Comments
[Google Maps] Internal Error
Question
Forge component by Labs
46
Published on 14 Dec 2020
Never managed to get this map to work, I keep getting the following:

"An internal error occurred and was logged.
Please try again later or contact the administration team.

Sorry for any inconvenience.

Press here to continue"

No idea what can be causing it as I've tried to tweak everything and it only happens in pages where I try to add the map.

Staff
Rank: #60
Have you checked if the error log, in Service Center, has more detail about this error?
Rank: #9645
João Pedro Abreu wrote:
Have you checked if the error log, in Service Center, has more detail about this error?
 I honestly have no idea how to access the service center.
 
Staff
Rank: #60
It's the cog icon highlighted in the screenshot below:
Rank: #9645
João Pedro Abreu wrote:
It's the cog icon highlighted in the screenshot below:
 

Thanks!

It says this:
"You need to define an API Key on the 'APIKey' site property of the GoogleMaps module" Can't find where I can insert the API key though.
 
Staff
Rank: #310
Hey there, Renato,

If you already have an API key, you can access the Google_Maps module page, under "eSpaces", and select the "Site properties" tab:

The "BrowserAPIKey" is the one you're looking for (there's a typo on the error message I'm afraid).

Could you please try setting it there and tell us how it went?
Rank: #6133
Hey Carlos,

I also live same issue.
I can not understand your solving method completely.
May you clarify to say about detail of your method

Regards,
Rank: #9645
Thanks! Managed to fix it. One more question, I wanted the user to insert his address and the map will update/move to his adress (already done), however I wanted to list under the map the company's agents within a 10km radius of his location, I have marked all the agents in the map, is there a way to only list the ones which are within a 10km radius?
Staff
Rank: #310
Hmm, as I recall that from my college days, Renato, there's a formula to calculate the distance between two degree unit points.

BUT you can't insert that into an aggregate, as far as I know, because there are no trigonometric functions. You can check if your case allows for an approximation and, if so, you can add an attribute to your aggregate and sort by it.

Ekincam: can you be a bit more specific on what is blocking you?
Rank: #9645
Thanks!

Also one last thing, I tried using your function to show a box with information once you click on a marker however nothing is happening.

Example:
Triggering: "click"

Handler: 
"function() {
    var contentString = 
    '<h3 style='margin:0'>Jeronimo XXXXXX</h3><br>
    <strong>Phone: </strong>212XXXXXXX<br>
    <br>
    <strong>Morada:</strong><br>
    R Santiago XXXXXXXXX<br>
    Corroios, 28XX-6XX<br>
    Portugal';

    var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    // Access this gMarker's map, set the center
    // to its position and zoom
    this.getMap().setCenter(this.getPosition());
    this.getMap().setZoom(8);    
    infowindow.open(this.getMap(), this);
}"
Staff
Rank: #310
From the looks of it, you might be defining an anonymous JS function, but not calling/setting it anywhere.

Is that the case?
Rank: #9645
Carlos Filipe Simões wrote:
From the looks of it, you might be defining an anonymous JS function, but not calling/setting it anywhere.

Is that the case?
 Wouldn't the JS function be called by the marker when I bind it to the marker in the "MarkerId" property?
 
Staff
Rank: #310
Yes it would: if I recall correctly, you can add on click marker event handlers, either by using the component's blocks or actions. You should specify the correct event, followed by the JavaScript body.

Hmm, could you share you action flow with us? Or maybe the oml with the issue, so we can have a look?

If that's not acceptable, is there a JavaScript error we can use as starting point?
Rank: #9645
Carlos Filipe Simões wrote:
Yes it would: if I recall correctly, you can add on click marker event handlers, either by using the component's blocks or actions. You should specify the correct event, followed by the JavaScript body.

Hmm, could you share you action flow with us? Or maybe the oml with the issue, so we can have a look?

If that's not acceptable, is there a JavaScript error we can use as starting point?
 https://i.imgur.com/lgXHUZS.png

This is all I have related to the google maps, disregard "procurar" and procurar2 + OnNotify & refreshAgentes, they're not related.

As you can see the triggering is click and it has the function in the handler and it's also binded to 1 of the 3 markers yet when I publish & try to click in it on the map it doesn't do anything, no errors no nothing.
 
Staff
Rank: #310
Ok...from the contents of that eSpace, I'd say you can't share a public URL so I can have look. But I think I found out the problem...would you mind tweaking the above code to:
"function() {
    var contentString = 
    '<h3 style=\'margin:0\'>Jeronimo XXXXXX</h3><br>'+
    '<strong>Phone: </strong>212XXXXXXX<br>'+
    '<br>'+
    '<strong>Morada:</strong><br>'+
    'R Santiago XXXXXXXXX<br>'+
    'Corroios, 28XX-6XX<br>'+
    'Portugal';

    var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    // Access this gMarker's map, set the center
    // to its position and zoom
    this.getMap().setCenter(this.getPosition());
    this.getMap().setZoom(8);    
    infowindow.open(this.getMap(), this);
}"
For some reason, the code is silently failing whenever we have multi-line strings, resulting in no JavaScript errors or even server-side calls. I guess it is somehow related to JavaScript not supporting multi-lined strings. I'd recommend using the 'string concatenation' method, since having the newlines there doesn't have any advantage.

Additionally, you need to escape your apostrophes (" ' ") inside the 'contentString' variable or ou'll be producing an invalid string literal.

Also: when you run into these types of problems, debugging the JavaScript source of the component could help (it's 'Map.js' file, inside one of the 'Google_Maps' source folder). Here's a small video of me on a test page, triggering the 'addMarkerEvent' function and breakpointing my way to completion.
Rank: #2212

Hi... I'm getting a "this.getMap is not a function". Any ideas? OutSystems 10, Component Google Maps Mobile.

Rank: #19878

Do you solve this.getMap not function? now error in my module

please how do you solve it

thanks

Hafiz