Add Draggable Markers and Events to your Google Maps August 29
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
Joe Levi Aug 30
Do you have a demo somewhere for us to see the code in action?
- http://www.JoeLevi.com
ganesh May 15
Hi, I have used it, it is very nice but i got problem
regarding zoom slider,popup? actully it is not in cotrol
so can i get code?
Manan Jun 3
ya it s nice but how we can declare oMarker where and where this code we have to write , we have to change the Map1 or as it is, and where we have to write API key if i have .
Sulip Jul 24
oMarker isn’t defined
Sulip Jul 24
when i drag the market, i do not get any updated New Latitude =, New Longitude =
both are empty.
here is what i used
Private Sub NewLatLongOnSaveMapDemo()
Dim GeoCode As Subgurim.Controles.GeoCode
Dim sMapKey As String = System.Configuration.ConfigurationManager.AppSettings(”googlemaps.subgurim.net”)
GeoCode = GMap1.getGeoCodeRequest(”3052. VIC. australia”, sMapKey)
Dim gLatLng As New Subgurim.Controles.GLatLng(GeoCode.Placemark.coordinates.lat, GeoCode.Placemark.coordinates.lng)
GMap1.setCenter(gLatLng, 16, Subgurim.Controles.GMapType.GTypes.Normal)
Dim oOption As New Subgurim.Controles.GMarkerOptions
oOption.draggable = True
Dim oMarker = New Subgurim.Controles.GMarker(gLatLng, oOption)
GMap1.addGMarker(oMarker)
GMap1.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