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

Question

В моем проекте laravel я пытаюсь показать местоположение моих клиник на картах Google (принимая значения широты и долготы из базы данных php). Follwoing - мой код в контроллере.

public function showClinicLocations($id)
{
    $clinic = Clinic::find($id);
    $locations = Location::where('clinicID', $id)->get();
    return view('clinic.locations')->with(['locations' =>  $locations  ,'clinic'=>$clinic]);
}

На странице просмотра правильно получается locations. Когда я утешаю locations.length, получаю результат как 12, его правильно, а также получаю полные местоположения name.

Но когда я пытался показать его в маркере, в маркере карты Google показывалось только 11 мест. Ниже приведен код в маркере карты Google.

<script>

// var services =<?php echo json_encode($services);?>;
// console.log(services);

function initMap() {
    var locations = <?php echo $locations ?>;
    console.log(locations.length);

    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 ?>;
    //var services = <?php echo $services ?>;

    //console.log(services);

    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']
                });
        var infowindow = new google.maps.InfoWindow()
        var content = locations[i]['locationName']; 

        google.maps.event.addListener(marker,'click', 
                        (function(marker,content,infowindow){ 
                            return function() {
                                infowindow.setContent(content);
                                infowindow.open(map,marker);
                            };
                        })(marker, content,infowindow));  

    }
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>

В чем проблема с кодом карт Google для отображения маркеров

Answer 1

Вы хотите сгенерировать карту только один раз и, возможно, также подогнать карту под границы всех отображаемых маркеров:

var locations = JSON.parse("<?php echo $locations ?>");

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: {
      lat: parseFloat(locations[0]["locationLat"]),
      lng: parseFloat(locations[0]["locationLong"])
    }
  });

  setMarkers(map);
}

function setMarkers(_map) {
  var boundsToFit = new google.maps.LatLngBounds();

  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"]
    });
    var infowindow = new google.maps.InfoWindow();
    var content = locations[i]["locationName"];

    google.maps.event.addListener(
      marker,
      "click",
      (function (marker, content, infowindow) {
        return function () {
          infowindow.setContent(content);
          infowindow.open(_map, marker);
        };
      })(marker, content, infowindow)
    );

    boundsToFit.extend(marker.getPosition());
  }

  _map.fitBounds(boundsToFit);
}