I am trying to show Markers on Google map. For some clinics, there is maybe one or more than 1 location that will be there. I am using Laravel and taking latitudes and longitudes values from the MySQL database. When I coded it is showing only one marker in only one location. Multiple markers are not showing.
Following is the code in the view page
@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">
</form>
</div>
</div>
</div>
</div>
<script>
function initMap() {
var locations = <?php echo $locations ?>;
var i;
for (i = 0; i < locations.length; i++) {
var uluru = {lat:parseFloat(locations[i]['locationLat']),lng:parseFloat(locations[i]['locationLong'])};
console.log(uluru);
var map = new google.maps.Map(
document.getElementById('regularMap'), {zoom: 4, center: uluru});
var marker = new google.maps.Marker({
map: map,
position: uluru,
});
}
marker.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
@endsection
Advertisement
Answer
@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="map" 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">
</form>
</div>
</div>
</div>
</div>
<script>
function initMap() {
var locations = <?php echo $locations ?>;
var j;
for (j = 0; j < locations.length; j++) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: parseFloat(locations[j]['locationLat']), lng:parseFloat(locations[j]['locationLong'])}
});
setMarkers(map);
}
}
function setMarkers(map) {
var locations = <?php echo $locations ?>;
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
map: map,
position: {lat: parseFloat(locations[i]['locationLat']), lng:parseFloat(locations[i]['locationLong'])},
map: map,
title: locations[i]['locationName']
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVzWibWlEc43MAKZk2N1PG6suW50uTnI4&callback=initMap">
</script>
@endsection