149
Views
16
Comments
[Google Maps] Internal Error
Question
Forge component by Labs
46
Published on 06 Aug 2019
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: #58
Have you checked if the error log, in Service Center, has more detail about this error?
Staff
Rank: #58
It's the cog icon highlighted in the screenshot below:
Staff
Rank: #303
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: #5346
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: #8324
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?
Rank: #8324
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: #303
From the looks of it, you might be defining an anonymous JS function, but not calling/setting it anywhere.

Is that the case?
Staff
Rank: #303
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?
Staff
Rank: #303
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: #1884

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