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
JavaScript
x
@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> @endsectionAdvertisement
Answer
JavaScript
@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