Laravel and google maps : foreach latitude/longitude show marker or map

Question

I have a table locations with a latitude and longitude field.

For each location I want a new map (or better a new marker) that uses the latitude and longitude from the table locations to display a city on the map.

index action of controller :

public function index()
    {
        $locations = Location::all();

        $locations->location_latitude = Input::get('location_latitude');
        $locations->location_longitude = Input::get('location_longitude');

        return View::make('forecasts.index')
            ->with('locations', $locations);
    }

google map with marker :

function initialize() {

    var map_canvas = document.getElementById('map_canvas');

    var location = new google.maps.LatLng({{ $location->location_latitude }}, {{ $location->location_longitude }});

    var map_options = {
        center: location,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(map_canvas, map_options)

    var marker = new google.maps.Marker({
        position: location,
        map: map,
    });

    marker.setMap(map);

  }

  google.maps.event.addDomListener(window, 'load', initialize);

When I do this it only displays the city from the last inserted latitude/longitude :

@foreach($locations as $location)

   var location = new google.maps.LatLng({{ $location->location_latitude }}, {{ $location->location_longitude }});

@endforeach

so which part of the code isn't working? Did the first example (with one map, one marker) works for you as it is? — JofryHS, Aug 11 '14 at 13:26
No that code didn't work because i'm not trying to load one set of latitude/longitude. When I change {{ $location->location_latitude }}, {{ $location->location_longitude }} to '50.9307','5.33248' it obviously works. — Gilko, Aug 11 '14 at 13:31
And when you are using `@foreach`, it works, but only showing the last one? — JofryHS, Aug 11 '14 at 13:33

score 1 · Answer 1 · answered Aug 11 '14 at 13:41

1

It is probably because while looping through the collection you are not actually creating separate marker.

function initialize() {

    var map_canvas = document.getElementById('map_canvas');

    // Initialise the map
    var map_options = {
        center: location,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options)

    // Put all locations into array
    var locations = [
    @foreach ($locations as $location)
        [ {{ $location->location_latitude }}, {{ $location->location_longitude }} ]     
    @endforeach
    ];

    for (i = 0; i < locations.length; i++) {
        var location = new google.maps.LatLng(locations[i][0], locations[i][1]);

        var marker = new google.maps.Marker({
            position: location,
            map: map,
        }); 
    }

    // marker.setMap(map); // Probably not necessary since you set the map above

}

answered Aug 11 '14 at 13:41

JofryHS

5,804
2
32
39

The map is gone and in the console I'm getting : Uncaught TypeError: Cannot read property 'lat' of null. – Gilko Aug 11 '14 at 14:06
Can you try to print out `locations` array in your console and check if it is in fact an array of longlat pairs? And make sure that all your longitude and latitude values in your models are valid values. – JofryHS Aug 11 '14 at 14:08
I have this in my array : var locations = [[50.930698394775,5.3324799537659], [51.054340362549,3.7174243927002],]; But I keep getting this error message : Uncaught TypeError: Cannot read property 'lat' of null – Gilko Aug 11 '14 at 18:00
Where is this file? How can you use blade? Isn't this a JS file? – thomas jaunism Nov 03 '15 at 00:59

Laravel and google maps : foreach latitude/longitude show marker or map

1 Answers1

Linked