2

i have list of lat long stored in db $order->customers->location_url and (location_url = 31.5952599,74.3526989 have data in this form) using foreach loop i am trying to print all markers on map in model but when i click to button it shows blank screen check screen shot even doesnot start map

here is my code that i am using to show map

html

<button class="btn-sm" type="button" data-toggle="modal" onclick ='initialize();' data-target="#map-modal-points">Show All Points</button>

model

<div class="modal fade" id="map-modal-points" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">All Shops</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="map_canvas" style="height: 400px"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary">Close</button>
      </div>
    </div>
  </div>
</div>

java script

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
function initialize() {
    var locations = [
    @foreach ($orders as $order)
        [ {{ $order->customers->location_url }}  ]     
    @endforeach
    ];
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

}
</script>

i am using this code to print map Laravel and google maps : foreach latitude/longitude show marker or map is there any other way i can print all markers ? or what mistake i am making in it?

0 Answers0