Markers are missing when calling it dynamically

Most of the Markers are missing when calling it dynamically. Here is my code. I am beginner in Laravel. The Sports variable contains various sports name, marker image for each sport name, popup image for each sport name etc. The Mapevents contains different/ repeated sport names with different latitude and longitude. While try to mark in Map using Markers most of the Map events are not displaying.

<script type="text/javascript">
  (function(A) {
  if (!Array.prototype.forEach)
    A.forEach = A.forEach || function(action, that) {
      for (var i = 0, l = this.length; i < l; i++)
        if (i in this)
          action.call(that, this[i], i, this);
      };
    })(Array.prototype);
    var
    mapObject,
    markers = [],
    markersData = {
      @foreach($mapevents as $event)
      @foreach($sports as $sport)
      @if($event->category_id==$sport->id)
      '': [
      {
        name: 'Events',
        location_latitude: "", 
        location_longitude: "",
        map_image_url: 'sport2gether/storage/<?php echo $sport->popup_image?>',
        name_point: '""',
        description_point: 'Event Details<br>Starting Date: ""<br>Ending Date: ""<br>Starting time: ""<br>Ending time: ""',
        url_point: 'eventsdetails'
      },
      ],
      @endif
      @endforeach
      @endforeach
      @foreach($maphotspots as $hotspot)
      @foreach($sports as $sport)
      @if($hotspot->category_id==$sport->id)
      '': [
      {
        name: 'Hotspots',
        location_latitude: "", 
        location_longitude: "",
        map_image_url: 'sport2gether/storage/<?php echo $sport->popup_image?>',
        name_point: '""',
        description_point: 'Hotspot Details<br>Starting Date: ""<br>Ending Date: ""<br>Starting time: ""<br>Ending time: ""',
        url_point: 'hotspotsdetails'
      },
      ],
      @endif
      @endforeach
      @endforeach
    };
    function initialize () {
      var mapOptions = {
        zoom: 16,
        center: new google.maps.LatLng("", ""),
        mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: false,
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
          position: google.maps.ControlPosition.LEFT_CENTER
        },
        panControl: false,
        panControlOptions: {
          position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControl: true,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE,
          position: google.maps.ControlPosition.TOP_RIGHT
        },
        scaleControl: false,
        scaleControlOptions: {
          position: google.maps.ControlPosition.TOP_LEFT
        },
        streetViewControl: false,
        streetViewControlOptions: {
          position: google.maps.ControlPosition.LEFT_TOP
        },
        styles: [{"featureType":"poi","stylers":[{"visibility":"off"}]},{"stylers":[{"saturation":-70},{"lightness":37},{"gamma":1.15}]},{"elementType":"labels","stylers":[{"gamma":0.26},{"visibility":"off"}]},{"featureType":"road","stylers":[{"lightness":0},{"saturation":0},{"hue":"#ffffff"},{"gamma":0}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"lightness":50},{"saturation":0},{"hue":"#ffffff"}]},{"featureType":"administrative.province","stylers":[{"visibility":"on"},{"lightness":-50}]},{"featureType":"administrative.province","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"labels.text","stylers":[{"lightness":20}]}]
      };
      var
      marker;
      mapObject = new google.maps.Map(document.getElementById('map'), mapOptions);
      for (var key in markersData)
        markersData[key].forEach(function (item) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
            map: mapObject,
            icon: 'sport2gether/storage/' + key, 
          });
          if ('undefined' === typeof markers[key])
            markers[key] = [];
          markers[key].push(marker);
          google.maps.event.addListener(marker, 'click', (function () {
      closeInfoBox();
      getInfoBox(item).open(mapObject, this);
      mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude));
     }));    
        });
    };
    function hideAllMarkers () {
      for (var key in markers)
        markers[key].forEach(function (marker) {
          marker.setMap(null);
        });
    };
    function toggleMarkers (category) {
      hideAllMarkers();
      closeInfoBox();
      if ('undefined' === typeof markers[category])
        return false;
      markers[category].forEach(function (marker) {
        marker.setMap(mapObject);
        marker.setAnimation(google.maps.Animation.DROP);

      });
    };
    function closeInfoBox() {
      $('div.infoBox').remove();
    };
    function getInfoBox(item) {
      return new InfoBox({
        content:
        '<div class="marker_info none" id="marker_info">' +
        '<div class="info" id="info">'+
        '<img src="' + item.map_image_url + '" class="logotype" alt=""/>' +
        '<h2>'+ item.name_point +'<span></span></h2>' +
        '<span>'+ item.description_point +'</span>' +
        '<a href="'+ item.url_point + '" class="green_btn">Join</a>' +
        '<span class="arrow"></span>' +
        '</div>' +
        '</div>',
        disableAutoPan: true,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(40, -210),
        closeBoxMargin: '50px 200px',
        closeBoxURL: '',
        isHidden: false,
        pane: 'floatPane',
        enableEventPropagation: true
      });
    };
</script>

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3jBhTlu
via IFTTT