Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save KalipheGTU/c271cb6e532a91e3d9e9d327ab1bd93d to your computer and use it in GitHub Desktop.
Save KalipheGTU/c271cb6e532a91e3d9e9d327ab1bd93d to your computer and use it in GitHub Desktop.
Form input google maps
{% include 'partial/head.html' %}
{% include 'partial/navbar.html' %}
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script type="text/javascript">
// variabel global marker
var marker;
function taruhMarker(peta, posisiTitik) {
if (marker) {
// pindahkan marker
marker.setPosition(posisiTitik);
} else {
// buat marker baru
marker = new google.maps.Marker({
position: posisiTitik,
map: peta,
});
}
// animasi sekali
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function() {
marker.setAnimation(null);
}, 750);
// kirim nilai koordinat ke input
$("input[name=longitude]").val(posisiTitik.lat());
$("input[name=latitude]").val(posisiTitik.lng());
console.log($("input[name=longitude]").val() + "," + $("input[name=latitude]").val());
}
function initialize() {
var propertiPeta = {
center: new google.maps.LatLng(-8.592487,116.109302),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var peta = new google.maps.Map(document.getElementById("google-maps"), propertiPeta);
// even listner ketika peta diklik
google.maps.event.addListener(peta, 'click', function(event) {
taruhMarker(this, event.latLng);
});
// marker.setMap(peta);
}
// event jendela di-load
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="card">
<div class="card-content">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input placeholder="Nama Lokasi" id="first_name" type="text" class="validate">
<label for="first_name">Nama Lokasi</label>
</div>
<div class="input-field col s6">
<select>
<option value="" disabled selected>Pilih Jenis</option>
<option value="1">Tempat Wisata</option>
<option value="2">Persimpangan</option>
</select>
<label for="jenis">Jenis</label>
</div>
<div id="google-maps" style="height: 400px; width:100%"></div>
<!-- input untuk menampung koordinat -->
<input type="hidden" name="longitude" value="" />
<input type="hidden" name="latitude" value="" />
<br>
<a class="waves-effect waves-light btn"><i class="material-icons left">done</i>Simpan</a>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
</script>
{% include 'partial/footer.html' %}
@KalipheGTU
Copy link
Author

hi!how we can do it, please ? thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment