[Google Maps Web] Adding marker by clicking on map

Micael Antunes

Question

Hi,
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?

clickMap.txt

22 Apr 2016

Nuno Reis

MVP

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)

23 Apr 2016

Carlos Filipe Simões

Staff

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. :)

26 Apr 2016

Micael Antunes

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.

27 Apr 2016

Steve Bramley

hi guys,

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

01 Aug 2016

Matt Petry

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.

thanks.

16 Aug 2016

Carlos Filipe Simões

Staff

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
        });
        map.panTo(latLng);
      }
...

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!

16 Aug 2016

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines