I am trying to show markers in multiple locations in Google Map in larvel project.I have added code in controller and passed locations
to view page.
Following is the code in my blade
@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="" name="clinicssview" id="clinicssview" enctype="multipart/form-data" novalidate>
{{ csrf_field() }}
<div class="card-header">
<h4 class="card-title"> View Clinics </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>
@endif
<div class="card-content">
<div class="row">
<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 class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Name
<star>*</star>
</label>
<input disabled id="user_name" name="user_name" class="controls form-control" type="text" placeholder="Clinc Name" value="{{$clinic->clinicName}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact First Name
<star>*</star>
</label>
<input disabled id="contact_fname" name="contact_fname" class="controls form-control" type="text" placeholder="Contact First Name" value="{{$clinic->clinicFname}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact Second Name
<star>*</star>
</label>
<input disabled id="contact_sname" name="contact_sname" class="controls form-control" type="text" placeholder="Contact Second Name" value="{{$clinic->clinicLname}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact Address
<star>*</star>
</label>
<input disabled id="contact_address" name="contact_adress" class="controls form-control" type="text" placeholder="Contact Address" value="{{$clinic->clinicAddress}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact City
<star>*</star>
</label>
<input disabled id="contact_city" name="contact_city" class="controls form-control" type="text" placeholder="City" value="{{$clinic->clinicCity}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact State
<star>*</star>
</label>
<input disabled id="contact_state" name="contact_state" class="controls form-control" type="text" placeholder="State" value="{{$clinic->clinicState}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Zip
<star>*</star>
</label>
<input disabled id="zip" name="zip" class="controls form-control" type="text" placeholder="Zip" value="{{$clinic->clinicZip}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="control-label">Email
<star>*</star>
</label>
<input disabled id="email" type="email" class="form-control" name="email" placeholder="Email" value="{{$clinic->clinicEmail}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Phone Number
<star>*</star>
</label>
<input disabled id="phone" name="phone" class="controls form-control" type="text" placeholder="Phone Number" value="{{$clinic->clinicPhone}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Website
<star>*</star>
</label>
<input disabled id="clinic_website" name="clinic_website" class="controls form-control" type="text" placeholder="Website" value="{{$clinic->clinicURL}}">
</div>
</div>
</div>
<div class="row"></div>
</form>
</div>
</div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/jskey=API_KEY">
</script>
<script type="text/javascript">
var locations = <?php echo $locations ?>;
var map = new google.maps.Map(document.getElementById('regularMap'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i]['locationLat'], locations[i]['locationLong']),
visible: true,
map: map
});
marker.setMap(map);
}
</script>
@endsection
But markers are not showing in locations. i am loading lattitude and longitudes from database. Please help me
See Question&Answers more detail:os