get lat long in view show map in every ads laravel

i want to show map in every ads form getting lat and long from database but i am getting only one map they are in foreach loop. how to solve it.

This is my controller :

i will pass $ads in controller.

This is my view :

@foreach($ads as $a)

            <div class="col-md-3 stories element portfolio_item isotope-item">
                <div class="portfolio_item_block">
                    <div class="portfolio_item_wrapper">
                        <div class="port_img_block wrapped_img"> <img class="fancybox" src="/uploads/adsdetails/" data-big="img/1.jpg" /> </div>
                        <div class="portfolio_columns_info">
                            <div class="portfolio_columns_title">
                                <h5><a href="#">Code:B00 
                                        @foreach ($cat as $key => $v)
                                        @if($v->id == $a->cat_id)
                                        
                                        @endif
                                        @endforeach
                                    </a></h5>
                                <div class="featured_items_category">
                                    <ul>
                                        <li> <i class="fa fa-arrows-alt"></i>   x  Total: </li>
                                        <li> <i class="fa fa-thumb-tack"></i>   </li>
                                        <li> <i class="fa fa-map-marker"></i><a href="img/1.jpg"  class="fancybox" rel="fancyboxgallery">View map</a></li>
                                    </ul>
                                    <div id="mapcanvas" style="width: 100%; height: 200px;"></div>


                                    <div id="latlong" lat="" long="" ></div>
                                    <?php
                                    $lati = $a->latitude;
                                    $long = $a->longitude;
                                    $addre = $a->address;
                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

this is my javascript code :

var LocationData = [<?php
                                    echo "[" . $a->latitude . "," . $a->longitude . ",'" . $a->address . "' ],";
                                    ?>
];
function initialize()
{
    var mapOptions = {
        maxZoom: 15
    };
    var map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();
    for (i = 0; i < LocationData.length; i++)
    {
        var p = LocationData[i];
        var latlng = new google.maps.LatLng(p[0], p[1]);
        bounds.extend(latlng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: p[2],
        });
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(this.title);
            infowindow.open(map, this);
        });
    }
    map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2v5cPhQ
via IFTTT