Google地图商店定位器在laravel项目中不起作用

Question

在我的项目中，我只想在我的位置显示各种诊所，如果在特定位置没有诊所，我想隐藏整个地图并显示消息“在此位置找不到诊所”。

我是google map和larvel的新手，我已经尝试了各种方法，但是它不起作用。现在，我已经使用了位置搜索API，并且在使用该功能时，如果搜索了特定位置，则如果有任何诊所在用标记显示，但是我的else条件不起作用，这意味着如果没有诊所，那么也只需映射加载该位置。

经过研究，我发现了另一件事"Google map store locator"。我不知道如何使用laravel来实现它，您能帮我吗


<input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>

    <?php $markers = json_encode( $locservices ); ?>
    <script>
       var markers = <?php echo $markers;?>



function initMap() {

  var markers = <?php echo $markers;?>

  if(markers.length > 0)
  {
  var latlng = new google.maps.LatLng(-33.92, 151.25);
  var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };


   var map = new google.maps.Map(document.getElementById("map"),myOptions);
   var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
   var json = jQuery.parseJSON(JSON.stringify(markers));

   if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };


            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        }
        else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

         // Bias the SearchBox results towards current map's viewport.
         map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });



   for( var o in json ){

lat = json[ o ].locationLat;
lng=json[ o ].locationLong;
name=json[ o ].locationName;

marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat,lng),
    name:name,
    map: map
}); 
google.maps.event.addListener( marker, 'click', function(e){
    infowindow.setContent( this.name );
    infowindow.open( map, this );
}.bind( marker ) );
}

}
else{
  alert("not ok");
}
}


    </script>
            <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&size=100x100&callback=initAutocomplete"

                 async defer></script>