[Google Maps] Adding marker by clicking on map

[Google Maps] Adding marker by clicking on map

Forge Component
Published on 20 Sep (6 days ago) by OutSystems Labs
13 votes
Published on 20 Sep (6 days ago) by OutSystems Labs

i am trying to add a marker on a map just by  clicking

But every time i use the getelementbyid () to quet the map on the javascript code the map simply desapear from my page.
I dont get eny kind of error on the browser javascript debuger, and i dont know what am i doing wrong.
Code on the file attached
Any ideas?
Don't use js to get the mapid. You already have it in OS.
Give a name to the Map WebBlock you're using and the just refer to it name.id (like with an input).

To place the marker, I'd also suggest OS actions instead of JS code). The desired sequence of actions is (I made it in two days just before sending it to production and it is working live for almost a year now so I recommend it) :
AddCoordinateMarkerToMap (place a dot in the map)
AddMarkerEvent (make an onclick event to the spot)
AddMarkerToBounds (helps defining the needed space)
FitMapToBounds (adjust map based in dots)

Unless you have a more exotic scenario, where you need to access functionality only covered by Google's API itself, I agree with Nuno: you should stick with our actions.

In case you really need to do it...not sure I follow your problem, you say you needed to use "getElementById" to obtain a div to create a map manually. Have you tried using the "osGoogleMap.create" action, like the Map block does?

Check out the JavaScript property (or the JS file, when acessing a page with a Map block) to get a general idea of how it works. Let us know if you need help. :)

Thank you very much for yoyr replies.
My solution:
I did manege to do it by action instead of JS.
I tried that in the first place but i didnt want to refresh all the page just to put a marker on the map and the refresh ajax  action didnt seem to work on maps.
After some investigation i found a workArround witch is replacing the ajax refresher with a RunJavaScript action with  empty function and the map refresh itself and the marker apear right away.

hi guys, 

how do I attach an OS action to an AddMapEvent 'click'? the handler parameter is meant for js.

would anyone be able to post a sample action sequence and the required JS how to put a marker on the map where the mouse has been clicked (or double clicked?)

that would be awesome.


Hey, Matt,

Google has provided an example on how to create a marker when clicking the Map. This is the part that's relevant:

      map.addListener('click', function(e) {
          placeMarkerAndPanTo(e.latLng, map);

      function placeMarkerAndPanTo(latLng, map) {
        var marker = new google.maps.Marker({
          position: latLng,
          map: map

The highlighted JS function takes in an 'e' argument, which contains the coordinates where the user clicked. Using this, you can use RichWidget's FakeNotifyWidget, as explained here, to invoke a screen action which would add the marker to the map. You will need to pass the coordinates through the "string with the parameters" that's mentioned in this last link.

Hope this helps!