<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<style> .pac-container.pac-logo { z-index: 9999; } </style>
</head>
<body>
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="container mt-2">
<div class="row">
<div class="col-md-6 m-auto">
<div class="card shadow">
<div class="card-body">
<!-- Trigger the modal with a button -->
<input type="text" name="currentlocation" id="currentlocation"
class="form-control col-md-6" placeholder="Select Location" readonly
data-toggle="modal" data-target="#myModal">
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog col-md-5 modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">×</button>
<h4 class="modal-title">Search Location</h4>
</div>
<div class="modal-body">
<div class="card-body">
<div class="form-group">
<input type="text" name="autocomplete" id="autocomplete"
class="form-control" placeholder="Enter a city">
</div>
<div class="form-group" id="lat_area">
<label for="latitude"> Latitude </label>
<input type="text" name="latitude" id="latitude"
class="form-control">
</div>
<div class="form-group" id="long_area">
<label for="latitude"> Longitude </label>
<input type="text" name="longitude" id="longitude"
class="form-control">
</div>
<br>
<div id="ucurrentlocation">Use Current Location</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script
src="https://maps.google.com/maps/api/js?key=xxxxx&libraries=places&callback=initAutocomplete"
type="text/javascript"></script>
<script src="address.js"></script>
</div>
</div>
<script> $("#ucurrentlocation").click(function(event) { getLocation(); });
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
div.innerHTML = "The Browser Does not Support Geolocation";
}
}
function showPosition(position) {
var location = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + position.coords.latitude + "," +
position.coords.longitude + "&key=xxxxx"
$.get(location, function(data) {
$("#currentlocation").val(data.results[0].formatted_address);
});
}
function showError(error) {
if (error.PERMISSION_DENIED) {
div.innerHTML = "The User have denied the request for Geolocation.";
}
}
getLocation();
</script>
</body>
</html>
*************************************************************
address.js
$(document).ready(function () {
$("#lat_area").addClass("d-none");
$("#long_area").addClass("d-none");
});
google.maps.event.addDomListener(window, "load", initialize);
function initialize() {
var input = document.getElementById("autocomplete");
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener("place_changed", function () {
var place = autocomplete.getPlace();
$("#latitude").val(place.geometry["location"].lat());
$("#longitude").val(place.geometry["location"].lng());
// --------- show lat and long ---------------
$("#lat_area").removeClass("d-none");
$("#long_area").removeClass("d-none");
var newadd =$("#autocomplete").val();
$("#currentlocation").val(newadd);
$(".close").click();
});
}
No comments:
Post a Comment