Question 229531 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – How to show more column from database in google maps infowindow?

Previously I was able to display the infowindow on maps, but it only displayed one value from the database. How do you display more than one database value on the google maps infowindow?
Thanks

This is my GoogleController

 public function index()
    {
        $data = Pelabuhan::all();
        $locations = [];
        foreach ($data as $item) {
        $locations[] = [
            $item->nama_pelabuhan,
            $item->latitude,
            $item->longitude,
            $item->title
        ];
        }
        
        return view('sinkopel', [
            'data' => $data,
            'locations' => $locations,
            'title' => 'Home'
        ]);
    }

This is my views

<div id="map"></div>
    <script type="text/javascript">
        function initMap() {
            const myLatLng = { lat: -8.636176573413225, lng: 117.53647409339307 }; 
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 9.1,
                center: myLatLng,
            });
  
            var locations = {{ IlluminateSupportJs::from($locations) }};
  
            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][1], locations[i][2]),
                    map: map
                  });
                    
                  google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                      infowindow.setContent(locations[i][0]);
                      infowindow.open(map, marker);
                    }

                  })(marker, i));
  
            }
        }
  
        window.initMap = initMap;
    </script>
  
    <script type="text/javascript"
        src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&callback=initMap" ></script>

This is the results : here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I tried this methods and add foreach but it display all my data in database, how do you make the data called based on the same id as the markers?

    infowindow.setContent("
    @foreach ($data as $item)
    <h5>{{ $item->nama_pelabuhan }}</h5>
    <p>{{ $item->peruntukan }}</p>
    @endforeach
");

    Result

    I tried this too but it didnt show anything :

    infowindow.setContent(locations[i][0][3][4]);

  2. 0

    The Google Maps API Reference for InfoWindow can be found here:
    https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow.setContent

    setContent([content])

    Parameters:

    content: string|Element|Text optional The content to be displayed by this InfoWindow.

    Return Value: None

    The info window will display whatever you pass to it.

    infowindow.setContent(locations[i][0]);

    This line means it will display the contents of locations[i][0].

    If you want to display more information, the best way to do that is to format the information with some HTML and pass that to setContent.

    infowindow.setContent("
    <h1>My Title</h1>
    <p>Some text about something</p>
");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search