locked
Send value to code behind from google maps addlistener RRS feed

  • Question

  • User-1184234752 posted

    Hi,

    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>
    <html>
    <head>
        <style>
            #map {
                height: 400px;
                width: 400px;
            }
        </style>
    </head>
    <body>
        <h3>My Google Maps Demo</h3>
        <div id="map"></div>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeaderWhenEmpty="true">
                   <Columns>
                       <asp:BoundField HeaderText="Markers" />
                   </Columns>
                </asp:GridView>
            </div>
        </form>
        <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">
        </script>
        <script>
            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();
                    dt.Columns.Add("Marker");               
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }
    

    The result is:

    You can refer to link below for tutorial of google map marker:
    https://developers.google.com/maps/documentation/javascript/markers

    Best regards,
    Dillion

    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>");                
                    $.ajax({
                        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) {
                            alert(data.responseText);
                        }
                    });
                    this.setMap(null);
                });
    

    In behind code or web service:

           [WebMethod]
            public void GoogleMap(string title)
            {
                //Do something
            }
    

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

    http://api.jquery.com/jquery.ajax/

    https://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx

    Best regards,
    Dillion

    Monday, May 8, 2017 5:12 AM