asked on

google maps autozoom to fit locations

I have some test code which is firing locations to a google map via javascript.
If I enter two locations that are beyond the current screen size pr zoom level is there a way to fire an auto zoom function to automatically resize the map to allow viewing of all markers?

ASKER CERTIFIED SOLUTION

Pieter Marais

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Lmillard

ASKER

I'm not sure what I am doing wrong, at the point the script hits bounds.extend it breaks. I am a total newbie with Google maps so i may just be being stupid here.

The var bounds = new GLatLngBounds() is being declared further up the page so not present in the code below but basically I have two input fields and as I enter a city in one it executes the function below and then executes it again when I input a city in the next input box. The map centers on the city as it is located and then I would like it to extend as required. Pretty sure that is what the code you advised is doing so must be my implementation, can you see anything obvious?

function checkLocationExists(addString,resultDiv) {
	showGmap();
    var address = addString;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
		var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location,
			title: address
        });
//			bounds.extend(results[0].geometry.location);
//			alert(bounds.getCenter());
//			map.setZoom(map.getBoundsZoomLevel(bounds));
//			map.setCenter(bounds.getCenter());

		document.getElementById(resultDiv).innerHTML = '<img src="assets/img/frontend/iconTick.png">';
      } else {
		document.getElementById(resultDiv).innerHTML = '<img src="assets/img/frontend/iconDelete.png">';
      }
    });
}

Open in new window

Pieter Marais

Your logic seems to be 100%. is there a chance that you can pass on the full code?

Alternatively, do you know what the error message is that you are recieving when it hits the bounds.extent?

REgards,
EZFrag

SOLUTION

timhigham

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Lmillard

ASKER

I have had a bit of a nightmare with this but it does seem to come down to versions.
I have messed about and the following code works a treat, this is a combo of the code posted by EZfrag and version control suggestions from timhigham so thanks to both. It basically came down to the functions either being renamed and called slightly differently.

I am going to be posting a few other google maps questions so if you happen to notice them your feedback would be much appreciated as you both know what your doing and I am only just starting to grasp it all!

Big thanks
Leigh

function checkLocationExists(addString,resultDiv) {
	showGmap();
    var address = addString;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
		var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location,
			title: address
        });
			bounds.extend(results[0].geometry.location);
			map.fitBounds(bounds);
		document.getElementById(resultDiv).innerHTML = '<img src="assets/img/frontend/iconTick.png">';
      } else {
		document.getElementById(resultDiv).innerHTML = '<img src="assets/img/frontend/iconDelete.png">';
      }
    });
}

Open in new window