Google maps markers not showing with multiple lat/lng coordinates from database

Question

I am using google geocode to convert an address into lat/lng coordinates and then searching my db for other 'articles'(actually store addresses) that are nearby. This is working and my 'locations' foreach loop works fine (If I look at the console I see an array). But when I go to add my markers nothing shows up. I'm not getting any errors with the code below but if I console.log(lat) it shows NaN.

The map shows up and it is centering correctly according to the var 'myLatlng', but no makers are showing. I saw on SO (HERE) that geocode creates a string so you need to parse string to float. But my attempt below is not working.

I'm using laravel 5. If you want to see how I got my lat/lng coordinates see my answer to me own question HERE. My template.blade.php page has this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYKEY&signed_in=true&libraries=places"></script>

The page I have the map has the script below these script tags.

Here's the relevant code for the page I have the map on. articles.index.blade.php

@section('footer')
<script>
function initialize() {

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

var myLatlng = new google.maps.LatLng(parseFloat({{ $article->lat }}),parseFloat({{ $article->lng }}));

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

var locations = [
@foreach($articles as $article)
  [{{$article->lat}}, {{$article->lng}}]
@endforeach
];

var lat = parseFloat(locations[0]);
var lon = parseFloat(locations[1]);

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

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

}

google.maps.event.addDomListener(window, "load", initialize);
</script>
@stop

Juan Bonnett · Accepted Answer · 2015-12-04T03:39:54.510

1

If I understood properly. You have this 'locations' array. Right? and those are the locations where the markers should appear. But if I'm not wrong, you could have a syntax error in this line:

var locations = [
@foreach($articles as $article)
  [{{$article->lat}}, {{$article->lng}}], //YOU NEED A COMMA TO SEPARATE EACH ELEMENT
@endforeach
];

Might be the API is not understanding that weird array with no commas separating each child :P

I want you to try this different logic and see if it works in this part:

//var lat = parseFloat(locations[0]); REMOVE THIS
//var lon = parseFloat(locations[1]); AND THIS

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,
    }); 
}

Leave the type as a String, no need to convert to float.

edited Dec 04 '15 at 03:39

answered Dec 04 '15 at 03:26

Juan Bonnett

1,823
1
15
33

Thanks. Yeah the locations array is showing in my console. And now (thanks to your answer) there is a comma after each coordinate, but...still no markers? If I console.log(lat) now I get a coordinate and not NaN. – thomas jaunism Dec 04 '15 at 03:34
I got a question. The numbers located in each array are something like: ["x.xxxxxxxx", "-x.xxxxxx"] ? is that the format? – Juan Bonnett Dec 04 '15 at 03:37
The variables you removed were out of the scope of your loop, LatLng method inside your loop was receiving garbage, no actual data updated by each iteration – Juan Bonnett Dec 04 '15 at 03:43

Google maps markers not showing with multiple lat/lng coordinates from database

1 Answers1