Mencari dan Mengisi Titik Koordinat Otomatis Dengan Google MAP. Sudah lama tidak sharing tentang aplikasi web untuk teman-teman semuanya.
Kali ini kita akan bahas mengenai pengembanan aplikasi Web GIS atau sistem informasi geografis berbasis Google Map Api. Jadi ceritanya ini adalah projek yang sedang kita garap, yaitu mengembangkan sebuah aplikasi pelaporan kerusakan jalan berbasis peta.
Pada aplikasi ini, pelaporan di visulasisikan menggunakan data berbasis peta, Yang mana data di dapatkan dari pelaporan masyarakat yang merespon atas kerusakan jalan yang ada.
Data laporan kerusakan jalan yang terdata menjadi acuan dari pemerintah dalam hal ini pekerjaan umum untuk mengambil tindakan dan keputusan atas permasalahan kerusakan jalan tersebut.
Mencari titik koordinat latitude dan longitude
Nah jika biasanya kita mengisi form koordinat dengan cara manual yaitu mengambil pada peta google, kali ini kita kembangkan dengan fitur otomatis dengan mencari nama jalan dan mendapatkan titik koordinatnya dan mengisikannya kedalam form.
Selain titik koordinat, berdasarkan nama jalan, Kamu juga dapat menggeser market atau titik koordinat sesuai kebutuhan yang di perlukan.
Pengembangan aplikasi gis dengan google map API ini menggunakan javascript.
Contoh Form
Mengisi Titik Koordinat Otomatis Dengan Google MAP
Hasil form
Diatas adalah contoh pengambilan titik koordinat dengan menggunakan google map api.
Untuk script javascriptnya sebagai berikut:
<script>
//map searchvar zoomVal = 13;var latVal = 0.4603134;
var lngVal = 101.4183501;
function initMap() { //map picker var curpoint = new google.maps.LatLng(latVal,lngVal);
var gmapdata = new google.maps.Map(document.getElementById(‘map’), { center: curpoint, zoom: zoomVal, mapTypeId: ‘roadmap’ }); var input = document.getElementById(‘searchMapInput’); gmapdata.controls[google.maps.ControlPosition.TOP_LEFT].push(input); var autocomplete = new google.maps.places.Autocomplete(input); autocomplete.bindTo(‘bounds’, gmapdata); var infowindow = new google.maps.InfoWindow(); var gmapmarker = new google.maps.Marker({ map: gmapdata, position: curpoint, anchorPoint: new google.maps.Point(0, -29) /*,draggable:true*/ });
//listener map picker google.maps.event.addListener(gmapdata, ‘click’, function(event) { /* document.getElementById(‘lat-span’).innerHTML = event.latLng.lat().toFixed(6); document.getElementById(‘lon-span’).innerHTML = event.latLng.lng().toFixed(6); */ document.getElementById(“lon”).value = event.latLng.lng().toFixed(6); document.getElementById(“lat”).value = event.latLng.lat().toFixed(6); gmapmarker.setPosition(event.latLng); if_gmap_updateInfoWindow(); }); google.maps.event.addListener(gmapmarker, ‘click’, function() { if_gmap_updateInfoWindow(); infoWindow.open(gmapdata, gmapmarker); }); /* document.getElementById(“lon”).value = lngVal; document.getElementById(“lat”).value = latVal; */ //listerner map search autocomplete.addListener(‘place_changed’, function() { infowindow.close(); gmapmarker.setVisible(false); var place = autocomplete.getPlace(); /* If the place has a geometry, then present it on a map. */ if (place.geometry.viewport) { gmapdata.fitBounds(place.geometry.viewport); } else { gmapdata.setCenter(place.geometry.location); gmapdata.setZoom(zoomVal); } gmapmarker.setIcon(({ size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(35, 35) })); gmapmarker.setPosition(place.geometry.location); gmapmarker.setVisible(true); var address = ”; if (place.address_components) { address = [ (place.address_components[0] && place.address_components[0].short_name || ”), (place.address_components[1] && place.address_components[1].short_name || ”), (place.address_components[2] && place.address_components[2].short_name || ”) ].join(‘ ‘); } //jika a b /* if(clickedMap == 1){ dataLat = gmapmarker.getPosition().lat().toFixed(6); dataLng = gmapmarker.getPosition().lng().toFixed(6); }else{ dataLat = place.geometry.location.lat(); dataLng = place.geometry.location.lng(); } */ dataLat = place.geometry.location.lat(); dataLng = place.geometry.location.lng(); infowindow.setContent(‘<div><strong>’ + place.name + ‘</strong><br>’ + address + ‘<!–<br>lat: ‘ + dataLat + ‘, Lng: ‘ + dataLng + ‘–>’); infowindow.open(gmapdata, gmapmarker); /* Location details */ /* document.getElementById(‘location-snap’).innerHTML = place.formatted_address; document.getElementById(‘lat-span’).innerHTML = place.geometry.location.lat(); document.getElementById(‘lon-span’).innerHTML = place.geometry.location.lng(); */ document.getElementById(‘loc’).setAttribute(‘value’, place.formatted_address); document.getElementById(‘lat’).setAttribute(‘value’, place.geometry.location.lat()); document.getElementById(‘lon’).setAttribute(‘value’, place.geometry.location.lng()); });}
function if_gmap_updateInfoWindow(){ infoWindow.setContent(“Longitude: “+ gmapmarker.getPosition().lng().toFixed(6)+”<br>”+”Latitude: “+ gmapmarker.getPosition().lat().toFixed(6));}
</script><script src=”https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap” async defer></script>
Dan berikut contoh form html nya.
<div id=”geoData”><div id=”geoData”><label>STA Awal</label> <input type=”text” name=”sta” class=”form-control” required> <label>Nama Jalan</label> <input id=”loc” type=”text” name=”lokasi” class=”form-control” required> <label>Latitude</label> <input id=”lat” type=”text” name=”latLokasi” class=”form-control” required> <label>Longitude</label> <input id=”lon” type=”text” name=”lonLokasi” class=”form-control” required></div>
Bagi teman-teman yang inin download filenya dapat dowloand disini. Atau ada yang ingin di tanyakan silahkan berikan komentar di bawah ini.