谷歌地图API。

I have a map on my site There are lots of markers with infoWindows on this map. For each infoWindow i use custom blade in result, on page init DOM take to much time to load, if there are too many markers on map.

I have and idea to load this windows only on marker click.

Can somebody help me with that?

try the below code:

function makeInfoWindowEvent(map, infowindow, marker) {
 google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map, marker);
  });
}

Found a good solution for this situation. Maybe it will be useful for somebody.

On get all

var locations = [
                @if(count($trainings) > 0)
                   @foreach($trainingsas $item)
                      @if($item->p_lat && $item->p_lng)
                      {
                        lat: {{$item->p_lat}},
                        lng: {{$item->p_lng}},
                        id: {{ $item->p_id }}
                      },
                      @endif
                   @endforeach
                @endif
            ];

Than, on mapping all marker on map, add a listener for each marker

    google.maps.event.addListener(marker, 'click', function (evt) {
                        var id = marker.get("id");
                        $.ajax({
                            url: "{{ route('getInfoWindow') }}",
                            data:{
                                    id: id
                            },
                            success: function(data) {
                                console.log(data);
                                infoWin.setContent(data);
                                infoWin.open(map, marker);
                            }
                        });

That is all we need. On backend we get model with that it and render output with our view!