Несколько маркеров не отображаются на карте Google

Question

Я пытаюсь показать маркеры на карте Google. Для некоторых клиник может быть одно или несколько мест. Я использую Laravel и беру значения широты и долготы из базы данных MySQL. Когда я закодировал, он показывает только один маркер только в одном месте. Несколько маркеров не отображаются.

Ниже приведен код на странице просмотра

    @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

Answer 1

    @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

Answer 2

В вашем случае вы устанавливаете данные карт в for l oop, поэтому я предполагаю, что каждый l oop генерирует новые карты, поэтому переопределяет исходную. Попробуйте установить карты за пределами for l oop и установить позицию, используя положение маркера, как это.

function initMap() {

  var locations = <?php echo $locations ?>;
  var i;

  var map = new google.maps.Map(document.getElementById('regularMap'), {
    zoom: 4
  });

  for (i = 0; i < locations.length; i++) {

    uluru = new google.maps.LatLng(parseFloat(locations[i]['locationLat']), parseFloat(locations[i]['locationLong']));
    console.log(uluru);

    var marker = new google.maps.Marker({
      map: map,
      position: uluru,
    });

    marker.setMap(map);
  }
}

Также добавьте marker.setMap(map); это для l oop.

Надежда это помогает вам.