Laravel maps markers are not displaying?

I am trying to get my google maps markers to display onto my laravel project, but none of the markers seem to be showing. I have done a dd() on places and it shows that it is getting information from the database. But for some reason none of the markers seem to be showing.

   @section('content')


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=env(GOOGLE_MAPS_API_KEY)"></script>
<script src="={{asset('js/app.js')}}"></script>


<div id="map" style="width: 100%; height: 500px;"></div>
     <script type="text/javascript">




                var places = <?php echo json_encode($places); ?>;
                console.log(places);
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: new google.maps.LatLng(56, -1.56),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                var infowindow = new google.maps.InfoWindow();

                var marker, i;

                for (i = 0; i < places.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(places[i][1], places[i][2]),
                        map: map
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(places[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }




            </script>

With the controller:

 public function index()
    {
        //
        $crags = DB::table('places')->get();

        return view('users/map',compact('places'));
    }

This is what the first item of my arays looks like as well:

0 => {#1312
      +"id": 2
      +"name": "stanage"
      +"location": "sheffield"
      +"latitude": 53
      +"longitude": 2
      +"created_at": "2022-03-03 21:36:49"
      +"updated_at": "2022-03-03 21:36:49"
    }

Answer

0 => {#1312
  +"id": 2
  +"name": "stanage"
  +"location": "sheffield"
  +"latitude": 53
  +"longitude": 2
  +"created_at": "2022-03-03 21:36:49"
  +"updated_at": "2022-03-03 21:36:49"
}

You should acces your place data like place[i].latitude, place[i].longitude not places[i][1]

marker = new google.maps.Marker({
    position: new google.maps.LatLng(places[i].latitude, places[i].longitude),
    map: map
});

Advertisement

Answer