CODEWITHSUNDEEP
javascriptajaxgoogle-mapsgeolocation
bl0b
bl0b

Reputation: 936

In google maps, the bounds always return the same coordinates

I'm trying to place marker on a map and reload the markers when the user is moving the map but I'm having few issues.

here is my code:

    $( document ).ready(function() {
        function initialize() {
            var bounds = new google.maps.LatLngBounds();
            var latLng = new google.maps.LatLng(33.76, -84.39);
            var myMapOptions = {
                sensor: true,
                mapTypeControl: true,
                zoom: 14,
                center: new google.maps.LatLng(33.76, -84.39),
                rotateControlOptions: false,
                panControl: false,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infowindow = new google.maps.InfoWindow({
                disableAutoPan : false,
            });
            var map = new google.maps.Map(document.getElementById('map_newsfeed'), myMapOptions);
            bounds.extend(latLng);
            google.maps.event.addListener(map, 'idle', function(ev){
                var ne = bounds.getNorthEast();
                var sw = bounds.getSouthWest();
                debugger
                $.ajax({
                    url: '/api/v1/building_permits/geo_bbox/'+ne.e+','+ne.d+'/'+sw.e+','+sw.d,
                    success: function (json) {
                        for (var i = 0; i < json.length; ++i) {
                            debugger
                            var latLng = new google.maps.LatLng(json[i].latitude, json[i].longitude);
                            bounds.extend(latLng);
                            var marker = new google.maps.Marker({position: latLng});
                            attachInfoWindows(marker, map, infowindow, json[i].latitude, json[i].longitude)
                            map.fitBounds(bounds);
                        }
                    }
                });
            });
        }
        function attachInfoWindows(marker, map, infowindow, lat, lng) {
            google.maps.event.addListener(marker, 'click', function() {
                var lat1 = lat, lng2 = lng;
                $.ajax({
                    url: '/api/v1/building_permits/'+lat1+'/'+lng2,
                    async: false,
                    success: function (json) {
                        infowindow.setContent(json);
                        infowindow.open(marker.get('map'), marker); 
                        //map.panTo(marker.getPosition());
                    }
                });
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    });

Upvotes: 0

Views: 1624

Answers (1)

geocodezip
geocodezip

Reputation: 161324

The bounds you want in your AJAX request is the bounds of the google.maps.Map object. To get that:

 bounds = map.getBounds();

However, when you first initialize the map, it won't be available, get it when the first 'bounds_changed' event triggers:

    function initialize() {
        var bounds = new google.maps.LatLngBounds();
        var latLng = new google.maps.LatLng(33.76, -84.39);
        var myMapOptions = {
            sensor: true,
            mapTypeControl: true,
            zoom: 14,
            center: new google.maps.LatLng(33.76, -84.39),
            rotateControlOptions: false,
            panControl: false,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infowindow = new google.maps.InfoWindow({
            disableAutoPan : false,
        });
        var map = new google.maps.Map(document.getElementById('map_newsfeed'), myMapOptions);
        google.maps.addListenerOnce(map, 'bounds_changed', function() {
            var bounds = map.getBounds();
            var ne = bounds.getNorthEast();
            var sw = bounds.getSouthWest();

            $.ajax({
                url: '/api/v1/building_permits/geo_bbox/'+ne.e+','+ne.d+'/'+sw.e+','+sw.d,
                success: function (json) {
                    // now make an empty bounds to determine the new viewport
                    var bounds =  new google.maps.LatLngBounds();
                    for (var i = 0; i < json.length; ++i) {
                        var latLng = new google.maps.LatLng(json[i].latitude, json[i].longitude);
                        bounds.extend(latLng);
                        var marker = new google.maps.Marker({position: latLng});
                        attachInfoWindows(marker, map, infowindow, json[i].latitude, json[i].longitude)
                    }
                    // only fit the bounds when all the markers have been added.
                    map.fitBounds(bounds);
                }
            });
        });
    }

Upvotes: 1

Related Questions