Input Longitude dan Latitude Google Map Kedalam Form


google-map-logo

source : bargainhunterhomeseller.com

Sekarang ini google map banyak sekali dipasang kedalam website, tujuannya banyak sekali, misalnya untuk mencari lokasi, menambahkan lokasi, mencari rute lokasi dan masih banyak sekali.

Judul artikel yang kali ini saya buat adalah mengenai salah satu fungsi dari google map, yaitu untuk menambahkan lokasi kedalam suatu website direktori. Dalam menambahkan peta yang menggunakan google map di dalam website directori, tentunya diperlukan kode longitude dan latitude lokasi tersebut di google map. Salah satu cara untuk mendapatkan kode tersebut adalah dengan mengunjungi website resmi google map kemudian mencari lokasinya. Dengan cara tersebut tentunya akan memakan waktu yang cukup lama, karena harus membuka tab baru di browser Anda untuk membuka alamat resmi google map. Nah, supaya tidak berpindah-pindah tab untuk mencari kode tersebut, bagaimana kalau kita mencari kode lokasi tersebut di website kita. Setelah ada ide tersebut, saya mencari-cari tutorialnya di Google, dan alhamdulilah ketemu dan akhirnya saya bagikan di sini.

Caranya adalah :

– Copy kode berikut dan simpan kedalam file .html

Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Get Lattitude and Longitude onmouseover and onclick in Google Map v2 - Programming - Google Maps</title>
<meta name="keywords" content="get lattitude longitude, latlng onclick google map, latlng onmousemove google map, get lattitude longitude onclick, google map mouse event, show lattitude longutude onmousemove, show latlng onclick">
<meta name="description" content="Get lattitude and longitude when onmouseover and onmouseclick in google map version 2" />

<script src="http://maps.google.com/maps?file=api&v=2&key=Kode-APIKEY-Anda" type="text/javascript"></script>

<style type="text/css">
body {font:10pt arial; }
.main { text-align:center; font:12pt Arial; width:100%; height:auto; }
.eventtext {width:100%; margin-top:20px; font:10pt Arial; text-align:left; line-height:25px; background-color:#EDF4F8;
padding:5px; border:1px dashed #C2DAE7;}
#mapa {width:100%; height:340px; border:5px solid #DEEBF2;}
ul {font:10pt arial; margin-left:0px; padding:5px;}
li {margin-left:0px; padding:5px; list-style-type:decimal;}
.code {border:1px dashed #cecece; background-color:#F7F7F7; padding:5px;}
.small {font:9pt arial; color:gray; padding:2px; }
.jimi { margin:0px;}
</style>

</head>

<body>

<div class="main">

<div style="width:70%;  margin:0px auto;">
<div id="mapa"></div>
<div class="eventtext">
<div>Lattitude: <span id="latspan"></span></div>

<div>Longitude: <span id="lngspan"></span></div>
<div>Lat Lng: <span id="latlong"></span></div>
<div>Lat Lng on click:
  <input type="text" id="latlongclicked" style="width:300px; border:1px inset gray;"></span></div>
</div>
</div>

</div>
<script type="text/javascript">
	if (GBrowserIsCompatible())
	{
		map = new GMap2(document.getElementById("mapa"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl(3));
		map.setCenter( new GLatLng(26.12295, -80.17122), 11,0);

		GEvent.addListener(map,'mousemove',function(point)
		{
			document.getElementById('latspan').innerHTML = point.lat()
			document.getElementById('lngspan').innerHTML = point.lng()
			document.getElementById('latlong').innerHTML = point.lat() + ', ' + point.lng()
		});

		GEvent.addListener(map,'click',function(overlay,point)
		{
			document.getElementById('latlongclicked').value = point.lat() + ', ' + point.lng()
		});
	}
</script>

<br />
<div style="width:70%;  margin:0 auto;">

</body>
</html>

– Settingan (cari dengan CTRL + F di file html Anda):
# Kode-APIKEY-Anda = kode API Key Google MAP, bisa Anda dapatkan di sini
# 26.12295, -80.17122 = Lokasi Awal Peta, bisa Anda rubah misalnya untuk wilayah Yogyakarta : -7.793997,110.36931
# Save

Untuk mendapatkan kodenya, Anda hanya klik bagian petanya

Demo

Screen Shoot :

ss-gmap

Klik gambar untuk perbesar

Selamat Mencoba

Sumber Script : http://vikku.info/programming/google-maps-v2/get-lattitude-longitude-onmouseover-and-onmouseclick-google-map-v2.htm

Advertisements

One thought on “Input Longitude dan Latitude Google Map Kedalam Form

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s