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" }
Advertisement
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 });