| Download Sample |
Penasaran setelah seorang teman menunjukkan sebuah web yang dapat menampilkan route di google map, dan setelah sekitar 3 hari mencoba otak-atik google map, akhirnya dapat juga saya menampilkan route di asp.net menggunakan komponen reimers.
Pada contoh ini, yang aku route yang aku tampilkan adalah route antara 2 point atau marker dimana yang salah satu marker-nya dapat digeser-geser lokasinya (gambar : truck). Setelah marker truk tersebut digeser, klik tombol GetDirection untuk mendapatkan garis route-nya.
Agar pada saat klik tombol GetDirection, halaman web tidak ‘berkedip’ atau flick, maka saya gunakan AJAX UpdatePanel di dalam aplikasi ini.
Contoh Script untuk halaman aspx-nya adalah sebagai berikut :
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <%@ Register Assembly="GoogleMap" Namespace="Reimers.WebControls" TagPrefix="Reimers" %> <%@ Register Assembly="GoogleMap" Namespace="Reimers.Map" TagPrefix="Reimers" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta content="BlendTrans(Duration=0.01)" http-equiv="Page-Exit" /> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <Reimers:GoogleMap ID="GMap" runat="server" Width="400px" Height="400px" AjaxScriptLoading="False"> </Reimers:GoogleMap> <br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="GetDirection" /> <br /> <asp:Panel ID="Panel1" runat="server"> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>
Disini saya menggunakan Reimers:GoogleMap untuk menampilkan google map, dengan ID : Gmap, dan Button GetDirection saya taruh didalam sebuah UpdatePanel.
Script di file aspx.vb berikut keterangan singkatnya adalah sebagai berikut :
1. Prosedur saat Page Load
Imports Reimers.Map
Imports Reimers.Map.Geocoding
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim mapCommand As String = String.Empty
'mendefinisikan Google Marker
Dim MyMarker0 = New Reimers.Map.GoogleMarker
Dim MyMarker = New Reimers.Map.GoogleMarker
Dim ic1 As New Reimers.Map.GoogleIcon("C1", "icons/golf.png", New Reimers.Map.GoogleSize(25, 30), New Reimers.Map.GooglePoint(16, 16), New Reimers.Map.GooglePoint(16, 16))
Dim ic2 As New Reimers.Map.GoogleIcon("C2", "icons/SchoolBus.png", New Reimers.Map.GoogleSize(25, 30), New Reimers.Map.GooglePoint(16, 16), New Reimers.Map.GooglePoint(16, 16))
If Not Page.IsPostBack Then
'set properti goggle map
GMap.GoogleKey = ConfigurationManager.AppSettings("MapKey")
GMap.Zoom = 15
'GMap.MapControls.Add(New Reimers.Map.Controls.GoogleLargeMapControl("mapcontrol"))
GMap.MapControls.Add(New Reimers.Map.Controls.GoogleNormalMapTypeControl("maptype"))
'GMap.MapControls.Add(New Reimers.Map.Controls.GoogleScaleControl("mapscale"))
GMap.PostRenderScript = GMap.EnableScrollWheelZoom()
Try
'menampilkan point 1 (lokasi tetap)
GMap.Icons.Add(ic1)
MyMarker0 = New Reimers.Map.GoogleMarker("test0", -6.93395, 107.620857, New Reimers.Map.GoogleMarkerOptions(ic1))
GMap.Overlays.Add(MyMarker0)
Dim RG0 As GoogleLatLng = New GoogleLatLng
RG0.Latitude = -6.93395
RG0.Longitude = 107.620857
Session("point0") = RG0
'menampilkan point 2 yang bisa digeser
GMap.Icons.Add(ic2)
MyMarker = New Reimers.Map.GoogleMarker("test", -6.93, 107.62, New Reimers.Map.GoogleMarkerOptions(ic2))
MyMarker.Options.Draggable = True
MyMarker.Options.Title = "This control is cool!!!"
MyMarker.Options.UpdateAfterDrag = True
GMap.Overlays.Add(MyMarker)
Dim RG1 As GoogleLatLng = New GoogleLatLng
RG1.Latitude = -6.93
RG1.Longitude = 107.62
Session("point1") = RG1
'menentukan center map berdasarkan titik tengah dari 2 point
Dim x As Double = (RG0.Longitude + RG1.Longitude) / 2
Dim y As Double = (RG0.Latitude + RG1.Latitude) / 2
GMap.Center = New Reimers.Map.GoogleLatLng(y, x)
Catch ex As Exception
End Try
End If
End Sub
2. Presedur untuk Button GetDirection
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim mapCommand As String = String.Empty
'menghapus garis route
If Not Session("line") Is Nothing Then
mapCommand = GMap.RemoveOverlay(CType(Session("line"), Reimers.Map.GoogleOverlay))
Session.Remove("line")
End If
'mendefinisikan route berdasarkan posisi point 1 dan point 2
Dim result As Reimers.Map.Geocoding.GoogleResult = Reimers.Map.Geocoding.GoogleGeocoder.GetDirections(Session("point1"), Session("point0"), GMap.GoogleKey)
If result.Status = GeocodeStatus.G_GEO_SUCCESS Then
Dim distance As Integer = 0
distance = result.Directions.Distance
Dim route As Reimers.Map.Geocoding.GoogleRoute = result.Directions.Routes(0)
'menampilkan nama2 jalan yang dilewati route
Dim tab As New Table
Dim tbr As New TableRow
Dim tbc As New TableCell
For Each [step] As Reimers.Map.Geocoding.GoogleStep In route.Steps
line.Points.Add([step].Point)
tbr = New TableRow
tbr.Cells.Clear()
tbc = New TableCell
tbc.Text = [step].Description
tbr.Cells.Add(tbc)
tab.Rows.Add(tbr)
Next
Panel1.Controls.Add(tab)
'menggambar garis route
If result.Directions.Line IsNot Nothing Then
result.Directions.Line.Width = 4
result.Directions.Line.Opacity = 100
result.Directions.Line.Color = Drawing.Color.Red
result.Directions.Line.Options.Geodesic = True
GMap.UpdateOverlays()
Session("line") = result.Directions.Line
mapCommand += GMap.AddOverlay(result.Directions.Line, True)
'refresh map berdasarkan mapcommand yang baru
ChangeMap(mapCommand)
End If
End If
End Sub
3. Prosedur untuk me-refresh map
Public Sub ChangeMap(ByVal Mapcommand As String)
If (Not ClientScript.IsStartupScriptRegistered("redrawMap")) Then
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "redrawMap", Mapcommand, True)
End If
End Sub
4. Prosedur untuk menggeser marker truk
Protected Sub MarkerDragEnd(ByVal sender As Object, ByVal e As MarkerDraggedEventArgs) Handles GMap.MarkerDragEnd
Dim mapCommand As String = String.Empty
'menggeser center map
Dim x As Double = (107.620857 + CDbl(e.[To].Longitude)) / 2
Dim y As Double = (-6.93395 + CDbl(e.[To].Latitude)) / 2
e.MapCommand = GMap.PanTo(New GoogleLatLng(y, x))
'menentukan kembali point 1
Dim RG0 As GoogleLatLng = New GoogleLatLng
RG0.Latitude = -6.93395
RG0.Longitude = 107.620857
Session("point0") = RG0
'menentukan lokasi point 2 setelah digeser
Dim RG1 As GoogleLatLng = New GoogleLatLng
RG1.Latitude = e.[To].Latitude
RG1.Longitude = e.[To].Longitude
Session("point1") = RG1
'mendapatkan lokasi (address) dari point 1
Dim result0 As GoogleResult = GoogleGeocoder.ReverseGeocode(-6.93395, 107.620857, GMap.GoogleKey)
Dim returnedAddress0 As Address = Nothing
If result0.Status = GeocodeStatus.G_GEO_SUCCESS Then
For Each loc0 As Location In result0.Locations
returnedAddress0 = loc0.Address
Exit For
Next
End If
'mendapatkan lokasi (address) dari point 2
Dim result As GoogleResult = GoogleGeocoder.ReverseGeocode(e.[To].Latitude, e.[To].Longitude, GMap.GoogleKey)
Dim returnedAddress As Address = Nothing
If result.Status = GeocodeStatus.G_GEO_SUCCESS Then
For Each loc As Location In result.Locations
returnedAddress = loc.Address
Exit For
Next
End If
End Sub
Contoh aplikasi yang pernah saya buat dapat anda download.
Hasil dari aplikasi diatas, kurang lebih adalah seperti gambar dibawah ini :
waduh bahsamu wis ngGilani, aku wis ra dhong blazzz.
Whalah…
oh ya, minal aidzin wal faidzin.. maaf lahir batin yaaa….
aku gak ngerti2 mas…mumet ndelok script nya huff…
hehehe… jangan cuman didelok
pasti ngerti deh nanti…
mas kalo yang di php nya gmana mas? tanpa lewat asp bisa gk?