Mengambil Latitude Longitude di Google Map

maps-google-picker-location

Bagaimana cara untuk mengambil posisi Latitude Longitude di Google Map dan memasukan nya ke form input ketika mouse di klik pada sebuat titik di map google. Berikut adalah kode untuk melakukan hal itu.

<!DOCTYPE html> 
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <title>Google Maps Location Picker Marker</title>
 <style type="text/css"> 
 #map {
 margin: 10px;
 width: 600px;
 height: 300px; 
 padding: 10px;
 }
 </style>
 
</head>
<body>
 
<table> <form> <tr> <td>Latitude</td> <td> <input type="text" name='latitude' id='latitude'></td> </tr> <tr> <td>Longitude</td> <td><input type="text" name='longitude' id='longitude'></td> </tr> </form> </table> var map; function initMap() { var opts = { 'center': new google.maps.LatLng(-6.952928, 107.638431), 'zoom': 12, 'mapTypeId': google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById('map'), opts); google.maps.event.addListener(map,'click',function(event) { document.getElementById('latitude').value = event.latLng.lat(); document.getElementById('longitude').value = event.latLng.lng(); }); } google.maps.event.addDomListener(window, 'load', init_map); https://maps.googleapis.com/maps/api/js?key=MAP_KEY&callback=initMap </body> </html>

Mudah dan sederhana silahkan anda kembangkan sesuai dengan kebutuhan anda. semoga bermanfaat, wassalam.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s