Tulisan ini masih berkaitan dengan tulisan saya sebelumnya : ASP.NET : Menampilkan Google Map ke dalam aplikasi asp.net (code behind). Komponen Reimers dapat diambil dari sampel yang saya sediakan di tulisan diatas, atau dapat diunduh langsung dari web sumber aslinya : http://www.reimers.dk/.
Dari beberapa contoh yang ada di internet, kebanyakan model tampilan koordinat titik adalah dengan model baloon tooltip seperti yang ada pada gambar diatas.
Dalam tulisan kali ini, saya mencoba menampilkan koordinat titik dengan 2 model, yakni : model baloon tooltip dan model tampilan koordinat ke dalam textbox.
Karena aplikasi Google Map membutuhkan mapkey, maka di web.config saya tambahkan Key di app_setting.
<appSettings> <add key ="MapKey" value="<google map key>"/> </appSettings>
Contoh default.aspx :
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="basicmap.aspx.vb" Inherits="examples_vbnet_basicmap" %> <%@ 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 id="Head1" runat="server"> <title>Get Coordinate</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <Reimers:GoogleMap ID="GMap" Width="350px" Height="350px" runat="server" OnClick="MapClick" OnExternalCallback="GMap_ExternalCallback"> </Reimers:GoogleMap> <br /> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> Longitude : <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <br /> Latitude : <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <asp:Button ID="Button3" runat="server" Text="_hiddenrefresh" Style="display: none;" CausesValidation="true" UseSubmitBehavior="true" OnClick="Button3_Click" Width="32px" /> </ContentTemplate> </asp:UpdatePanel> </div> <div id="Container" onclick="__doPostBack('UpdatePanel2', '');"> </div> </form> </body> </html>
dan script default.aspx.vb :
Imports Reimers.Map Partial Class examples_vbnet_basicmap Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then GMap.GoogleKey = ConfigurationManager.AppSettings("MapKey") GMap.Center = New GoogleLatLng(-6.93395, 107.620857) GMap.Zoom = 7 GMap.EnableScrollWheelZoom() GMap.MouseWheelZoomEnabled = True GMap.EnableDragging() GMap.EnableInfoWindows() End If End Sub Protected Sub MapClick(ByVal sender As Object, ByVal e As Reimers.Map.CoordinatesEventArgs) Handles GMap.Click Dim mapCommand As String = String.Empty Dim googleKey As String = ConfigurationManager.AppSettings("googleMap_key") Dim result As Reimers.Map.Geocoding.GoogleResult = Reimers.Map.Geocoding.GoogleGeocoder.ReverseGeocode(e.Coordinates, googleKey) Dim marker As Reimers.Map.GoogleMarker = AddMarker(e.Coordinates, mapCommand) If Not result.Locations.Count = 0 Then mapCommand += marker.OpenInfoWindowHTML(GMap, String.Format("Lat: {0}<br />Lng: {1}<br />Address: {2}", e.Coordinates.Latitude, e.Coordinates.Longitude, result.Locations(0).Address)) Else mapCommand += marker.OpenInfoWindowHTML(GMap, String.Format("Lat: {0}<br />Lng: {1}<br />", e.Coordinates.Latitude, e.Coordinates.Longitude)) End If mapCommand += String.Format("document.getElementById('{0}').click();", Button3.ClientID) e.MapCommand = mapCommand Session("X") = e.Coordinates.Longitude Session("Y") = e.Coordinates.Latitude End Sub Protected Sub GMap_ExternalCallback(ByVal Argument As String, ByRef MapCommand__1 As String) If Argument = "lookup" Then Dim mapCommand__2 As String = String.Empty Dim googleKey As String = ConfigurationManager.AppSettings("googleMap_key") Dim addr As New Reimers.Map.Geocoding.Address() Dim result As Reimers.Map.Geocoding.GoogleResult = Reimers.Map.Geocoding.GoogleGeocoder.Geocode(addr, googleKey) Dim marker As Reimers.Map.GoogleMarker = AddMarker(result.Locations(0).Point, mapCommand__2) mapCommand__2 += marker.OpenInfoWindowHTML(GMap, String.Format("Lat: {0}<br />Lng: {1}<br />Address: {2}", result.Locations(0).Point.Latitude, result.Locations(0).Point.Longitude, result.Locations(0).Address)) MapCommand__1 = mapCommand__2 End If End Sub Private Function AddMarker(ByVal latlong As Reimers.Map.GoogleLatLng, ByRef mapCommand As String) As Reimers.Map.GoogleMarker mapCommand = String.Empty Dim marker As New Reimers.Map.GoogleMarker(Guid.NewGuid().ToString(), latlong) mapCommand = GMap.ClearOverlays(True) GMap.Overlays.Add(DirectCast(marker, Reimers.Map.GoogleOverlay)) mapCommand += GMap.AddOverlay(DirectCast(marker, Reimers.Map.GoogleOverlay)) Return (marker) End Function Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) TextBox1.Text = Session("X") TextBox2.Text = Session("Y") Session("X") = Nothing Session("Y") = Nothing End Sub End Class
Hasilnya kurang lebih akan seperti ini :
Referensi :
Wah, makasih bos, model kaya gini nih yang dicari Mr.Kom.
Aku golek2 ra nemu2 je
😀
sip… seperti biasa, smg bisa ‘memuaskan’ Mr. Kom 😀
[…] tentang Google Map, yakni : Menampilkan Google Map ke dalam aplikasi asp.net (code behind) dan Menampilkan koordinat titik di google map. Namun kali ini saya ingin menampilkan tulisan tentang koneksi data yang ada di SQL Server 2005 ke […]
[…] Menampilkan koordinat titik di google map […]
kalo pakei php gimana?
coba baca disini : http://groups.google.com/group/google-maps-api/browse_thread/thread/0b14c2cdbd0edcbb. Maaf, sya sendiri gak begitu mudeng PHP.
koordinat yg dari google map ini koordinat apa ya? udah geografis kah?
Yup.. itu udah koordinat geografis.
Gimana C. Cara bikinnya??
sombol koordinat bisa diganti gambar sendiri g???
BAGAIMANA CARA MENEMUKAN KOORDINAT LONGITUDE DAN LATITUDE SUATU DAERAH
Bagaimana cara menelusuri google eart atau maps yang yang akurat (kondisi yg terlihat adalah kondisi saat di sorot…