Send value to code behind from google maps addlistener RRS feed

  • Question

  • User-1184234752 posted


    I searched but didn´t find any answer to my problem. I have a addlistener on multiple markers. That works fine and shows the information of the clicked marker. But I also want the event to send the marker.ID to a code behind function that will add the ID (and corresponding information) to a gridview. Finally the marker should be removed from the map (if possible).

    The map will contain about 200 markers and each time the user will chose about 10-20 markers and add it to the grid. In the grid the user then will be able to change order of the markers and the result will be a route that will be driven. Some code below:

    google.maps.event.addListener(marker,'click', function () {

    infowindow.open(map, marker);

    // I want to send marker.ID to code behind and add that ID to a gridview of chosen markers and also delete this marker from the map


    Thursday, May 4, 2017 12:31 PM

All replies

  • User-271186128 posted

    Hi carlrichter,

    What’s the ID of your Marker? Is the title?
    I think you could try to use js to add marker’s information to the gridview.
    If you want pass the info to behind code, you could try to call ajax in click event.
    And you can use marker.setMap(null) to remove the marker.
    For example:
    In aspx:

    <!DOCTYPE html>
            #map {
                height: 400px;
                width: 400px;
        <h3>My Google Maps Demo</h3>
        <div id="map"></div>
        <form id="form1" runat="server">
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeaderWhenEmpty="true">
                       <asp:BoundField HeaderText="Markers" />
        <script src="Scripts/jquery-3.1.1.js"></script>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=[YOUR KEY] &callback=initMap">
            function initMap() {
                var uluru = { lat: -25.363, lng: 131.044 };
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: uluru
                var marker = new google.maps.Marker({
                    map: map,
                    title: "marker1",
                marker.addListener('click', function () {
                    $("#GridView1").append(this.getTitle()); //get the title and assign it to Gridview, 
    //if you want to send the value to code behind, you could use JQuery Ajax call web method. this.setMap(null); }); var marker = new google.maps.Marker({ position: { lat: -26.363, lng: 133.044 }, map: map, title: "marker2", }); marker.addListener('click', function () { $("#GridView1").append(+ this.getTitle()); this.setMap(null); }); } </script> </body> </html>

    In Behind code:

    protected void Page_Load(object sender, EventArgs e)
                if (!IsPostBack)
                    DataTable dt = new DataTable();
                    GridView1.DataSource = dt;

    The result is:

    You can refer to link below for tutorial of google map marker:

    Best regards,

    Friday, May 5, 2017 8:46 AM
  • User-1184234752 posted

    Amazing example, so much thanks for your reply.

    I just have one question, because I have to get to code behind, how does a jquery ajax call look like? Im afraid I have never used it. All I need is to call a method in code behind, retrieve values from a table with the sent ID and populate a gridview with those values.

    Friday, May 5, 2017 12:20 PM
  • User-271186128 posted

    Hi carlrichter,

    You could refer to the following code:

    In the click event listener:

                marker.addListener('click', function () {
                    $("#GridView1").append("<tr><td>" + this.getTitle() + "</td></tr>");                
                        type: "POST",
                        url: "WebService1.asmx/GoogleMap",
                        data: JSON.stringify({ title: this.getTitle() }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            //Do something
                        error: function (data) {

    In behind code or web service:

            public void GoogleMap(string title)
                //Do something

    You can refer to links below for a tutorial of ajax:



    Best regards,

    Monday, May 8, 2017 5:12 AM