Laravel fetch longitude and latitude from database and display markers on Google Map

Question

Hello guys I need help from you. I'm coding a web application using laravel framework. I've recorded logitudes, latitudes and other informations in the database. I want to fetch those informations and display their marker on google map. All examples I'm getting are for PHP scratch code. Is there anyone who can help me how to do it in laravel?

HERE IS THE DATABASE CODE

Schema::create('alertes', function (Blueprint $table) {
           $table->bigIncrements('id');
           $table->string('code');
           $table->string('code_client');
           $table->string('client_category');
           $table->string('longitude');
           $table->string('latitude');
           $table->timestamps();
       });

HERE IS MY BLADE FILE

                <div id="map" style="width:100%;height:400px;"></div>
            </div>
        </div>
    </div>
</div>
@endsection()

@section('custom-script')

<script type="text/javascript" src="{{asset('assets')}}/map/carte_alertes.js"></script>
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnyJJ2gorvX0rsuhBJLNUsfyioWSSep2Q&callback=init"></script>


<script>

</script>


@endsection

HERE IS MY SCRIPT.JS

<script>

    function makeRequest(url, callback) {
        var request;
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest(); 
        } else {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                callback(request);
            }
        }
        request.open("GET", url, true);
        request.send();
    }



    var map;

    // Beni
    var center = new google.maps.LatLng(0.496422, 29.4751);

    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();

    function init() {

    var mapOptions = {
        zoom: 13,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    makeRequest("{{route('alertes.index')}}", function (data) {

        var data = JSON.parse(data.responseText);

        for (var i = 0; i < data.length; i++) {
            displayLocation(data[i]);
        }
    });
}

    // displayLocation method

    function displayLocation(location) {

    var content = '<div class="infoWindow"><strong>' + location.code_client + '</strong>'
        + '<br/>' + location.client_category + '</div>';

    if (parseInt(location.latitude) == 0) {
        geocoder.geocode({'client_category': location.client_category}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {

                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    title: location.code_client
                });

                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                });
            }
        });
    } else {
        var position = new google.maps.LatLng(parseFloat(location.latitude), parseFloat(location.longitude));
        var marker = new google.maps.Marker({
            map: map,
            position: position,
            title: location.code_client
        });

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

Answer 1

Still having the problem

HERE IS MY NE

function initMap(){

        var mapElement = document.getElementById('map');
        var url = '/map-marker';


       async function markerscodes(){
           var data = await axios(url);
           var alerteData = data.data;
           mapDisplay(alerteData);
       }
       markerscodes();

      function  mapDisplay(datas) {

          //map otions
          var options ={
              center :{
                  lat:Number(datas[0].latitude), lng:Number(datas[0].longitude)
              },
              zoom : 10
          }

          //Create a map object and specify the DOM element for display
          var map = new google.maps.Map(mapElement, options);

          var markers = new Array();
          for (let index = 0; index < datas.length; index++){
              markers.push({
                  coords: {lat: Number(datas[index].latitude), lng:Number(datas[index].longitude)},

                  content : '<div><h5>${datas[index].code_du_suspect}</h5><p><i class="icon address-icon"></i>${datas[index].etat_du_suspect}</p></div>'
              })
          }

          //looping through marker
          for (var i = 0; i < markers.length; i++){
              //une fontion a creer si dessous
              addMarker(markers[i]);
          }

         function addMarker(props){
              var marker = new gooogle.maps.Marker({
                  position : props.coords,
                  map: map
              });

              if(props.iconImage){
                  marker.setIcon(props.iconImage);
              }

              if(props.content){
                  var infoWindow = new google.maps.infoWindow({
                      content : props.content
                  });
                  marker.addListener('click', function () {

                     infoWindow.open(map, marker);
                  });
              }
         }

      }
    }

Answer 2

更改回调 = initMap不是回调 = init

   src="https://maps.googleapis.com/maps/api/js?key=yourapikey&callback=init"></script>

Answer 3

try your data format this way

   public function mapMarker(){ 
        $locations = Alerte::all();
        $map_markes = array ();
        foreach ($locations as $key => $location) { 
            $map_markes[] = (object)array(
                'code' => $location->code,
                'code_client' => $location->code_client,
                'client_category' => $location->client_category,
                'longitude' => $location->longitude,
                'latitude' => $location->latitude,
            );
        }
        return response()->json($map_markes);
    }

Answer 4

复制此代码并重新放置此代码

content : `<div><h5>${Number(datas[index].latitude)}</h5><p><i class="icon address-icon"></i>${Number(datas[index].longitude)}</p></div>`