I want to update the data, but when I open one of the data based on ID, the marker doesn’t appear in the maps view, so I can’t drag it to change position.
This is view code :
@extends('layouts.main')
@section('container')
<style type="text/css">
#map {
height: 400px;
}
</style>
<main class="form-login">
@csrf
<div class="card">
<div class="card-body mt-2">
<form id="UserForm" action="{{ url('update-data/'. $data->id) }}" method="POST">
@csrf
<div class="row">
<div class="col-md-6">
<fieldset>
<legend class="font-weight-semibold"><i class="icon-reading mr-2"></i>Data Pelabuhan</legend>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Nama Pelabuhan</label>
<div class="col-lg-9">
<input type="email" name="email" class="form-control" placeholder="Email" value="{{ $data->nama_pelabuhan }}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Tipe Pelabuhan</label>
<div class="col-lg-9">
<input type="text" name="tipe_pelabuhan" class="form-control" placeholder="Tipe Pelabuhan" value="{{ $data->tipe_pelabuhan }}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Provinsi</label>
<div class="col-lg-9">
<select name="provinsi" id="provinsi" class="custom-select">
<option value="" selected>Pilih Provinsi</option>
<option value="Nusa Tenggara Barat">Nusa Tenggara Barat</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Kabupaten</label>
<div class="col-lg-9">
<select name="kabupaten" id="kabupaten" class="custom-select">
<option value="" selected>Pilih Kabupaten</option>
<option value="Kab. Bima">Kab. Bima</option>
<option value="Kab. Dompu">Kab. Dompu</option>
<option value="Kab. Lombok Barat">Kab. Lombok Barat</option>
<option value="Kab. Lombok Tengah">Kab. Lombok Tengah</option>
<option value="Kab. Lombok Timur">Kab. Lombok Timur</option>
<option value="Kab. Lombok Utara">Kab. Lombok Utara</option>
<option value="Kab. Sumbawa">Kab. Sumbawa</option>
<option value="Kab. Sumbawa Barat">Kab. Sumbawa Barat</option>
<option value="Kota Bima">Kota Bima</option>
<option value="Kota Mataram">Kota Mataram</option></select>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend class="font-weight-semibold"><i class="icon-envelope mr-2"></i></legend>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Konstruksi</label>
<div class="col-lg-9">
<input type="text" name="konstruksi" placeholder="Konstruksi" class="form-control" value="{{ $data->konstruksi }}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Tanggal Berlaku SK</label>
<div class="col-lg-9">
<input type="text" name="tgl_berlaku_sk" placeholder="Tanggal Berlaku SK" class="form-control" value="{{ $data->tgl_berlaku_sk }}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Nomor Izin</label>
<div class="col-lg-9">
<input type="text" name="no_izin" placeholder="Nomor Izin" class="form-control" value="{{ $data->no_izin }}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Kedalaman Pelabuhan</label>
<div class="col-lg-9">
<input type="text" name="kedalaman" placeholder="Kedalaman Pelabuhan" class="form-control" value="{{ $data->kedalaman }}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Hirarki Pelabuhan</label>
<div class="col-lg-9">
<input type="text" name="hierarki" placeholder="Hirarki Pelabuhan" class="form-control" value="{{ $data->hierarki }}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Peruntukan Pelabuhan</label>
<div class="col-lg-9">
<input type="text" name="peruntukan" placeholder="Peruntukan Pelabuhan" class="form-control" value="{{ $data->peruntukan }}">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Tahap Pelabuhan</label>
<div class="col-lg-9">
<input type="text" name="tahap" placeholder="Tahap Pelabuhan" class="form-control" value="{{ $data->tahap_pelabuhan }}">
</div>
</div>
</fieldset>
</div>
<div class="col-md">
<div class="mb-3">
<input type="hidden" name="latitude" value="{{ $data->latitude }}" class="form-control rounded-top @error('latitude') is-invalid @enderror" id="latitude" disabled>
@error('latitude')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div class="mb-3">
<input type="hidden" name="longitude" value="{{ $data->longitude }}" class="form-control rounded-top @error('longitude') is-invalid @enderror" id="longitude" disabled>
@error('longitude')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<label for="koordinat" class="form-label">Titik Lokasi Pelabuhan</label>
<div id="map"></div>
<script type="text/javascript">
function initMap() {
const myLatLng = { lat: -8.636176573413225, lng: 117.23647409339307 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: myLatLng,
scrollwheel: true,
});
var location = {{ IlluminateSupportJs::from($location) }};
const pos = { location };
let marker = new google.maps.Marker({
position: pos,
map: map,
draggable:true
});
google.maps.event.addListener(marker,'position_changed',
function (){
let lat = marker.position.lat()
let lng = marker.position.lng()
$('#latitude').val(lat)
$('#longitude').val(lng)
});
}
</script>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&callback=initMap" >
</script>
</div>
</div>
</form>
<div class="text-right">
<!-- <button type="button" id="UserBtnSinkron" class="btn btn-sm btn-warning rounded-round mr-3">
Sinkronisasi DRH
</button> -->
<button type="submit" id="UserBtnSave" class="btn btn-sm btn-primary rounded-round">
Simpan Data
</button>
</div>
</div>
</div>
<!-- /2 columns form -->
@endsection
This is Controller :
public function edit($id)
{
$data = Pelabuhan::find($id);
$location = [];
$location[] = [
$data->latitude,
$data->longitude
];
return view('pelabuhan.edit', compact('data'),[
'title' => 'Daftar Pelabuhan',
'data' => $data,
'location' => $location
]);
}
I try to defined this variable to get the latitude and longitude in database, here it is the controller :
public function edit($id)
{
$data = Pelabuhan::find($id);
$latitude = [];
$latitude[] = [
$data->latitude
];
$longitude = [];
$longitude[] = [
$data->longitude
];
return view('pelabuhan.edit', compact('data'),[
'title' => 'Daftar Pelabuhan',
'data' => $data,
'latitude' => $latitude,
'longitude' => $longitude
]);
And this is the javascript view :
<script type="text/javascript">
function initMap() {
const myLatLng = { lat: -8.636176573413225, lng: 117.23647409339307 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: myLatLng,
scrollwheel: true,
});
var latitude = {{ IlluminateSupportJs::from($latitude) }};
var longitude = {{ IlluminateSupportJs::from($longitude) }};
const pos = { lat: latitude, lng: longitude };
let marker = new google.maps.Marker({
position: pos,
map: map,
draggable:true
});
google.maps.event.addListener(marker,'position_changed',
function (){
let lat = marker.position.lat()
let lng = marker.position.lng()
$('#latitude').val(lat)
$('#longitude').val(lng)
});
}
</script>