Googlemap location based on IP address is not showing in laravel project - php

Question

am trying to show google map in one section of my form, which i want to load locations based on IP Address, but when i tried locations are not loading based on ip address.What is the issue
#extends('user.layout.app')
#section('content')
<script src="{{ url('js/user/location.js') }}"></script>
<div class="container-fluid add-location">
<div class="row">
<div class="col-md-12">
<div class="card">
<form method="post" action="{{ route('locationstore') }}" name="locationadd" id="locationadd" enctype="multipart/form-data" novalidate>
{{ csrf_field() }}
<div class="card-header">
<h4 class="card-title"> Add My Location </h4>
</div>
#if(!empty($errors->all()))
<div class="row"> #foreach ($errors->all() as $error)
<div class="col-lg-12">
<div class="alert alert-danger"> <span>{{ $error }}</span> </div>
</div>
#endforeach </div>
<div class="row geolocationerror hide">
<div class="col-lg-12">
<div class="alert alert-danger"> <span>location not found</span> </div>
</div>
</div>
#endif
<div class="card-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="form-group">
<label class="control-label">Location Name
<star>*</star>
</label>
<input id="location_name" name="location_name" class="controls form-control" type="text" placeholder="Location Name" value="{{ old('location_name') }}">
#if ($errors->has('location_name')) <span class="help-block"> {{ $errors->first('location_name') }} </span> #endif </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="form-group">
<label class="control-label">Clinics
<star>*</star>
</label>
<select class="selectpicker" data-style="btn-info btn-fill btn-block" id="clinic_id" name="clinic_id">
#foreach($clinics as$clinic)
<option value="{!! $clinic->clinicID !!}" id="{!! $clinic->clinicID !!}">{!! $clinic->clinicName !!}</option>
#endforeach
</select>
#if ($errors->has('category_id')) <span class="help-block"> {{ $errors->first('category_id') }} </span> #endif </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="form-group">
<label class="control-label">Address Line 1
<star>*</star>
</label>
<input type="text" placeholder="Address Line 1" class="form-control geoaddress" id="address_1" name="address_1" value="">
</div>
<div class="form-group">
<label class="control-label">Address Line 2 </label>
<input type="text" placeholder="Address Line 2" class="form-control geoaddress" id="address_2" name="address_2" value="">
</div>
<div class="form-group">
<label class="control-label">City
<star>*</star>
</label>
<input type="text" placeholder="City" class="form-control geoaddress" id="city" name="city" value="">
</div>
<div class="form-group">
<label class="control-label">State
<star>*</star>
</label>
<input type="text" placeholder="State" class="form-control geoaddress" id="state" name="state" value="">
<input type="hidden" id="state_code" name="state_code" value="" class="hidden-validation">
<input type="hidden" id="formatted_address" name="formatted_address" value="" class="hidden-validation">
<input type="hidden" id="latitude" name="latitude" value="" class="hidden-validation">
<input type="hidden" id="longitude" name="longitude" value="" class="hidden-validation">
</div>
<div class="form-group">
<label class="control-label">Country
<star>*</star>
</label>
<input type="text" placeholder="Country" class="form-control geoaddress" id="country" name="country" value="">
</div>
<div class="form-group">
<label class="control-label">Zip
<star>*</star>
</label>
<input type="text" placeholder="Zip" class="form-control geoaddress" id="zip" name="zip" value="">
</div>
<div class="form-group">
<label class="control-label">Phone Number
<star>*</star>
</label>
<input type="text" placeholder="Phone Number" class="form-control geoaddress" id="phone" name="phone" onkeypress="return isNumber(event)">
</div>
<div class="form-group">
<label class="control-label">Website
<star>*</star>
</label>
<input type="text" placeholder="Website" class="form-control" id="website" name="website" >
<span class="text-info"><strong>[ex. http://www.website.com]</strong></span> </div>
<div class="form-group">
<label class="control-label">Location Email
<star>*</star>
</label>
<input type="text" placeholder="Reports Email" class="form-control" id="reports_email" name="reports_email">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="form-group hide">
<label class="control-label">Location
<star>*</star>
</label>
<input id="pac-input" name="location" class="controls form-control" type="text" placeholder="Search Box">
<!-- <div id="map" height="1000" width="1000"></div> -->
</div>
<h4 >Preview</h4>
<div class="form-group">
<div id="regularMap" class="map"></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-12 col-md-6">
</div>
<div class="clear"></div>
<div class="col-xs-12 col-sm-12 col-md-12 form-action">
<button type="submit" class="btn btn-fill btn-info">Submit</button>
Cancel </div>
<div class="clear"></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="{{ asset('js/bootstrap-selectpicker.js')}}"></script>
<script>
$(document).ready(function(){
{{-- custom.initSmallGoogleMaps('41.31', '-72.92'); --}}
var map = new google.maps.Map(document.getElementById('regularMap'), {
zoom: 16,
center: new google.maps.LatLng(41.31,-72.92),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
myMarker = new google.maps.Marker({
position: new google.maps.LatLng(41.31, -72.92),
draggable: true
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
google.maps.event.addListener(myMarker, 'dragend', function(evt) {
document.getElementById("latitude").value = evt.latLng.lat();
document.getElementById("longitude").value = evt.latLng.lng();
});
$('#locationadd').submit(function(event) {
var formatted_address = $('#formatted_address').val();
var latitude = $('#latitude').val();
var longitude = $('#longitude').val();
if(formatted_address == '' && !isFloat(latitude) && !isFloat(longitude))
{
getLocation();
}
});
$('.geoaddress').blur(function(){
getLocation();
})
function isFloat(n){
return Number(n) === n && n % 1 !== 0;
}
function getLocation(){
var address_1 = $('#address_1').val();
var address_2 = $('#address_2').val();
var city = $('#city').val();
var state = $('#state').val();
var country = $('#country').val();
var zip = $('#zip').val();
if(address_1 != '' && city != '' && state != '' && country != '' && zip != '' ){
var finalAdd = address_1+'+'+address_2+'+'+city+'+'+state+'+'+country+'+'+zip;
var formatted_address = address_1+' '+address_2+' '+city+' '+state+' '+country+' '+zip;
$.ajax({
url : 'https://maps.googleapis.com/maps/api/geocode/json?address='+finalAdd+'&key=MY_KEY',
type: 'GET',
success : function(data){
if(data.results.length >0){
var places = data.results;
document.getElementById("latitude").value = places[0].geometry.location.lat;
document.getElementById("longitude").value = places[0].geometry.location.lng;
document.getElementById("formatted_address").value = formatted_address;
document.getElementById("pac-input").value = places[0].formatted_address;
for (var i = 0, len = places[0].address_components.length; i < len; i++) {
var ac = places[0].address_components[i];
if (ac.types.indexOf("administrative_area_level_1") >= 0) {
document.getElementById("state_code").value = ac.short_name;
document.getElementById("state").value = ac.long_name;
}
}
var newLatLang = new google.maps.LatLng(places[0].geometry.location.lat, places[0].geometry.location.lng);
map.panTo(newLatLang);
myMarker.setPosition(newLatLang);
custom.getTimeZone(places[0].geometry.location.lat, places[0].geometry.location.lng);
}else{
document.getElementById("latitude").value = '';
document.getElementById("longitude").value = '';
document.getElementById("formatted_address").value = '';
$.scrollTo($('#geolocationerror'), 1000);
$('#geolocationerror').show();
event.preventDefault();
event.preventDefault();
}
}
});
}
}
});
</script>
{!! $validator !!}
#endsection
Please not that i have added correct API key, which i have added in .env file. Now the locations are only showing based on values provided in State,Zip,location name values etc.
I want maps get loaded based on the IP adddress