Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 520

Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 535

Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 542

Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 578

Deprecated: Function set_magic_quotes_runtime() is deprecated in /home/gathadam/public_html/wp-settings.php on line 18
Add Draggable Markers and Events to your Google Maps
Previous     Next

Add Draggable Markers and Events to your Google Maps

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

If you liked this, then subscribe to my RSS feed

3 comments

  1. Joe Levi Aug 30

    Do you have a demo somewhere for us to see the code in action?

    - http://www.JoeLevi.com

  2. kashif Aug 20

    Dear,
    It is very good code for using Google earth map. I m facing some problems, I need your help required, iI am using Google earth control (gEarthMap Control), I want to label the bubble (Not want to use Infowindow), and second is when I using infowindow, when I click it, its split the bubble in many bubbles and then I click one of split bubble then it show the infowindow. I do not want to split the bubble, I need your help kindly I need it urgently,

    You can email me at m_kashifsaeed@hotmail.com

    Regards,
    Kashif

  1. Add Google Maps to your .Net site in 10 minutes