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

Laravel | Google API: How to iterate map of specific id

I’m having problem on how to display different map ids. I want to display specific google map with its respective marker but all I get is google maps but no markers or google maps and markers displayed but only on the last map id that is iterated.

Here is my map which is inside a foreach loop

<div id="map{{ $address->id }}" style="width: 465px; height: 400px;"></div>

Javascript:

<script>
    function initMaps() {
        var mapOptions = {
            center: { lat: 15.0742, lng: 120.6881 },
            zoom: 12,
            mapTypeId: 'terrain'
        };
        var map = new google.maps.Map(document.getElementById('map{{ $address->id }}'), mapOptions);
        
        var marker = new google.maps.Marker({
            position: { lat: 15.0742, lng: 120.6881 },
            map: map,
            draggable: true,
            street_address: document.getElementById('street_address').value
        });

        marker.addListener('dragend', function (event) {
            var userID = document.getElementById('userID').value;
            var newLat = event.latLng.lat();
            var newLng = event.latLng.lng();
            var newStreetAddress = document.getElementById('street_address').value;
            
            console.log('Session: ' + userID ,' New Street Address: ' + newStreetAddress, ' New Latitude: ' + newLat, ' New Longitude: ' + newLng);

            setTimeout(function() {
                var Lat = newLat;
                var Lng = newLng;
                document.getElementById('latitude2').value = Lat;
                document.getElementById('longitude2').value = Lng;
            }, 2000);

        });
    }

    google.maps.event.addDomListener(window, 'load', initMaps);
</script>

I had an idea to foreach the javascript like this but still didn’t work.

@foreach($addresses as $address)
var map = new google.maps.Map(document.getElementById('map{{ $address->id }}'), mapOptions);
        
        var marker = new google.maps.Marker({
            position: { lat: {{ $address->lat }}, lng: {{ $address->lng }} },
            map: map,
            draggable: true,
            street_address: document.getElementById('street_address').value
        });
@endforeach
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed it

    @foreach ($addresses as $address)
    

<script>
    function initMaps() {
    var mapOptions = {
        center: { lat: 15.0742, lng: 120.6881 },
        zoom: 12,
        mapTypeId: 'terrain'
    };

    var map = new google.maps.Map(document.getElementById('map{{ $address->id }}'), mapOptions);

    var marker = new google.maps.Marker({
        position: { lat: {{ $address->lat }}, lng: {{ $address->lng }} },
        map: map,
        draggable: true,
        street_address: document.getElementById('street_address').value
    });

    function updateCoordinates() {
        var userID = document.getElementById('userID').value;
        var currentLat = marker.getPosition().lat();
        var currentLng = marker.getPosition().lng();
        var currentStreetAddress = document.getElementById('street_address').value;

        console.log('Session: ' + userID, ' Current Street Address: ' + currentStreetAddress, ' Current Latitude: ' + currentLat, ' Current Longitude: ' + currentLng);

        var Lat = currentLat;
        var Lng = currentLng;
        document.getElementById('latitude{{ $address->id }}').value = Lat;
        document.getElementById('longitude{{ $address->id }}').value = Lng;
    }

    marker.addListener('dragend', function (event) {
        var userID = document.getElementById('userID').value;
        var newLat = event.latLng.lat();
        var newLng = event.latLng.lng();
        var newStreetAddress = document.getElementById('street_address').value;

        console.log('Session: ' + userID, ' New Street Address: ' + newStreetAddress, ' New Latitude: ' + newLat, ' New Longitude: ' + newLng);

        setTimeout(updateCoordinates, 2000);
    });

    // Update coordinates every 2 seconds
    // setInterval(updateCoordinates, 2000);
}

google.maps.event.addDomListener(window, 'load', initMaps);

</script>
@endforeach

  2. 0

    Depending on the zoom level, some details are not displayed so as not to obscure other details.

    For example, at low scale (small scale), meaningful contour lines will be too dense and will obscure the shading of the terrain.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search