Gath Adams

Following on from my last post on how to add Google Maps to your ASP.Net site, I’m now going to show how easy it is to add draggable markers to your map.

First, make sure you have the map working on your webform.

Having the map fire server-side events on user actions is pretty simple, and here is the code:

    Private Sub AddEventToMapDemo()
        Dim GeoCode As Subgurim.Controles.GeoCode
        Dim sMapKey As String = System.Configuration.ConfigurationManager.AppSettings("googlemaps.subgurim.net")

        GeoCode = GMap.geoCodeRequest("3052. VIC. australia", sMapKey)
        Dim gLatLng As New Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng)

        GMap.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal)
        Dim oOption As New Subgurim.Controles.GMarkerOptions
        oOption.draggable = True
        oMarker = New Subgurim.Controles.GMarker(gLatLng, oOption)
        GMap.addGMarker(oMarker)

        GMap.addListener(New Subgurim.Controles.GListener(oMarker.ID, Subgurim.Controles.GListener.Event.dragend, _
        "function(){{ var ev = new serverEvent('dragend', 0); ev.addArg(" & oMarker.ID & ".getPoint().lat()); ev.addArg(" & oMarker.ID & ".getPoint().lng()); ev.send(); }}"))

    End Sub

You then need to add code to handle the event:

    Protected Function GMap_ServerEvent(ByVal s As Object, ByVal e As Subgurim.Controles.GAjaxServerEventOtherArgs) As String

        If e.eventName = "dragend" Then
            Response.Write("New Latitude =" & e.eventArgs(0) & ", New Longitude = " & e.eventArgs(1))
        End If

    End Function

The server-side event will be fired every time the marker is dragged and dropped.

In my situation, I wanted to allow the user to drag & drop the marker as many times as they wanted - and only store the new Lat/Long values when the user pressed the Save button.

This is a little bit harder to code as the variables used to reference the marker cannot be accessed globally - so we can’t just read their values when the user presses the save button (to the gurus: I’m sure they can, but I couldn’t find an easy way to get at them) . However, we can store them in hidden fields when the DragEnd event is raised, and examine those fields when Save is pressed.

Add these fields to your webform:

<input type=hidden id="hidLat" name="hidLat" runat=server />
<input type=hidden id="hidLng" name="hidLng" runat=server />
<asp:Button ID="Button1" runat="server" Text="Save" />

And add this sub to your code-behind:

    Private Sub NewLatLongOnSaveMapDemo()
        Dim GeoCode As Subgurim.Controles.GeoCode
        Dim sMapKey As String = System.Configuration.ConfigurationManager.AppSettings("googlemaps.subgurim.net")

        GeoCode = GMap.geoCodeRequest("3052. VIC. australia", sMapKey)
        Dim gLatLng As New Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng)

        GMap.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal)
        Dim oOption As New Subgurim.Controles.GMarkerOptions
        oOption.draggable = True
        oMarker = New Subgurim.Controles.GMarker(gLatLng, oOption)
        GMap.addGMarker(oMarker)

            GMap.addListener(New Subgurim.Controles.GListener(oMarker.ID, Subgurim.Controles.GListener.Event.dragend, _
            "function(){ document.getElementById('hidLat').value=" & oMarker.ID & ".getPoint().lat();document.getElementById('hidLng').value=" & oMarker.ID & ".getPoint().lng() }"))

    End Sub

And here is the ‘Save’ button click event:

    Protected Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        Response.Write("New Latitude =" & hidLat.Value & ", New Longitude = " & Me.hidLng.Value)
    End Sub