I have a really strange error that keeps causing my browser to just freeze when I try to resize a map to fit the markers I have placed on it.

My resize code for reference:

 function sizeMap() {
            // create a new bounds object to define the new boundry
            var bounds = new google.maps.LatLngBounds();
            // loop through each the string latlang values held in the latlng
            // aray
            for ( var i = 0; i <latlngArray.length ; i++) {
                // create a new LatLng object based on the string value
                var tempLatLng = new google.maps.LatLng(latlngArray[i]);
                // extend the latlng bounds based on the new location
                bounds.extend(tempLatLng);
            }
            //  map.fitBounds(bounds); <== everything seems to work fine until this line is unmented 
        }

Problem is I cant debug it properly using firebug because that freezes to! Any one got any ideas on what the problem may be?

Thanks in advance.

Update:

In answer to puckheads question the following code shows where the latlng array is populated to start with:

function geocodeAddress (address) {
           
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( {'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    loadMarker(results[0].geometry.location,"Info here",address);
                    latlngArray.push(results[0].geometry.location); <== latlngs are first added here they are as a result of a call to the google geocode service with a standard string address.
                } else {
                    alert("Geocode was not successful for the following reason: " +" "+  status);
                }
            });
        }

I have a really strange error that keeps causing my browser to just freeze when I try to resize a map to fit the markers I have placed on it.

My resize code for reference:

 function sizeMap() {
            // create a new bounds object to define the new boundry
            var bounds = new google.maps.LatLngBounds();
            // loop through each the string latlang values held in the latlng
            // aray
            for ( var i = 0; i <latlngArray.length ; i++) {
                // create a new LatLng object based on the string value
                var tempLatLng = new google.maps.LatLng(latlngArray[i]);
                // extend the latlng bounds based on the new location
                bounds.extend(tempLatLng);
            }
            //  map.fitBounds(bounds); <== everything seems to work fine until this line is unmented 
        }

Problem is I cant debug it properly using firebug because that freezes to! Any one got any ideas on what the problem may be?

Thanks in advance.

Update:

In answer to puckheads question the following code shows where the latlng array is populated to start with:

function geocodeAddress (address) {
           
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( {'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    loadMarker(results[0].geometry.location,"Info here",address);
                    latlngArray.push(results[0].geometry.location); <== latlngs are first added here they are as a result of a call to the google geocode service with a standard string address.
                } else {
                    alert("Geocode was not successful for the following reason: " +" "+  status);
                }
            });
        }

• javascript
• google-maps-api-3

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 11, 2012 at 15:45 user1079178user1079178 13322 silver badges1010 bronze badges 2

• 1 Did you solve the question? - if so you should accept or write your own correct answer! – levi Commented Jul 8, 2014 at 15:43
• Did you try with Chrome and the javascript console? – MrUpsidown Commented Apr 21, 2015 at 11:37

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4 +50

The problem is as others have mentioned, that you try to create a LatLng object with another LatLng object as argument. It only accepts 2 or 3 arguments, where the two first are numbers. https://developers.google./maps/documentation/javascript/reference#LatLng

However you can entirely skip the part where you create a new LatLng object, and use the current one from your array inside the loop.

This fixes the problem: http://jsfiddle/y9ze8a1f/1/

function sizeMap() {
    // create a new bounds object to define the new boundry
    var bounds = new google.maps.LatLngBounds();
    // loop through each the string latlang values held in the latlng
    // aray
    for ( var i = 0; i <latlngArray.length ; i++) {
        // This is causing the issue, you can only create a LatLng with two separate latitude and longitude arguments
        //var tempLatLng = new google.maps.LatLng(latlngArray[i]);

        bounds.extend(latlngArray[i]);
    }
    map.fitBounds(bounds);
}

If you would want to create a new LatLng based on the old one though, you could do that by using the LatLng methods lat() and lng()

http://jsfiddle/q7sh4put/

function sizeMap() {
    // create a new bounds object to define the new boundry
    var bounds = new google.maps.LatLngBounds();
    // loop through each the string latlang values held in the latlng
    // aray
    for ( var i = 0; i <latlngArray.length ; i++) {
        // create a new LatLng object based on the string value
        var tempLatLng = new google.maps.LatLng(latlngArray[i].lat(), latlngArray[i].lng());

        // extend the latlng bounds based on the new location
        bounds.extend(tempLatLng);
    }
    map.fitBounds(bounds);
}

As far as I know, you can't create a LatLng object from a single string parameter. If you have a string in the form "lat, lng", then split them apart before creating the LatLng object. The inside of your loop would look like this:

        var tempLatLng = latlngArray[i].split(',');
        bounds.extend(new google.maps.LatLng(tempLatLng[0], tempLatLng[1]));

There is a magic location that freezes google maps pletely. lat: any, lng: -90. Everything you can is to omit this values as follows:

let lng = position.lng();
if (lng > -90 - 0.001 && lng < -90 - 0.001) {
  lng = -90 - 0.001;
}
bounds.extend(
  new google.maps.LatLng(position.lat(), lng)
);

Created issue for google map https://issuetracker.google./issues/280958696.

You don't create a new LatLng from a string. It is created from 2 numbers, although it appears 2 strings will work too, one for the latitude and one for the longitude. One string will not work.

So you can say new google.maps.LatLng(-25.363882, 131.044922) or even new google.maps.LatLng('-25.363882', '131.044922') but not new google.maps.LatLng('-25.363882, 131.044922') So you need to pass 2 separate values to new google.maps.LatLng but it appears you are only passing one.

http://code.google./apis/maps/documentation/javascript/reference.html#LatLng

Based on your updated code, you do not need to create tempLatLng at all. Your array already contains LatLng objects so you should be able to say bounds.extend(latlngArray[i]) in the for loop...

Use Timer:

var Timer="";
    $(window).resize(function() {
        clearInterval(Timer);
        run_timer();
    });
    function run_timer() {
        Timer = setInterval(function(){sizeMap();}, 1500);
    }
    function sizeMap() {
        clearInterval(Timer);
        // create a new bounds object to define the new boundry
        var bounds = new google.maps.LatLngBounds();
        // loop through each the string latlang values held in the latlng
        // aray
        for (var i = 0; i <latlngArray.length ; i++) {
            // create a new LatLng object based on the string value
            var tempLatLng = new google.maps.LatLng(latlngArray[i]);
            // extend the latlng bounds based on the new location
            bounds.extend(tempLatLng);
        }
        //  map.fitBounds(bounds); <== everything seems to work fine until this line is unmented 
    }