CODEWITHSUNDEEP
phpgoogle-mapslaravel-5.1
thomas jaunism
thomas jaunism

Reputation: 815

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

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

Upvotes: 0

Views: 1592

Answers (1)

Juan Bonnett
Juan Bonnett

Reputation: 1853

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.

Upvotes: 1

Related Questions