?
Solved

GLatLngBounds( ) to zoom to extent of 2 points via Google Maps API

Posted on 2010-11-11
3
Medium Priority
?
1,437 Views
Last Modified: 2012-05-10
I am trying to create a map using hte Google API that will automatically zoom to best fit two points that are provided by the user.  These points are contained in a PHP variable and I have transfered them to a javascript array.

Initially I had planned to use
latlngbounds.extend(latlng[i]); 

Open in new window

to extend the GLatLngBounds but it did not work, nor did  

var point = new GLatLng(latlng[i]); latlngbounds.extend(point);

Open in new window



I keep getting this error

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C)
Timestamp: Thu, 11 Nov 2010 15:18:50 UTC


Message: Invalid argument.
Line: 395
Char: 18
Code: 0
URI: http://maps.gstatic.com/intl/en_us/mapfiles/285c/maps2.api/main.js


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zoom to extents</title>
<link href="../css/layout.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAu6sjqcmGfoqTHmTvfkq0ChSpkSOrz0Cwg3N68il0aaFJTpnuCBQxjGoicyV8T8a1Pm6s99H3kAGuoA" type="text/javascript"></script>


<?php 
$coord1="47.6, -100.89";
$coord2="47.55, -100.88";
?>


<script language="Javascript" type="text/javascript"> 
function initialize() {
  if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("mapPane_gmap"));
	//map.setCenter(new GLatLng(0,0),0);
	
	var latlng= new Array(); 
	latlng[0] = "<?php echo  $coord1;?>";
	latlng[1] = "<?php echo  $coord2;?>";
	
	var latlngbounds = new GLatLngBounds( );

	for ( var i = 0; i < latlng.length; i++ ){
	  alert(latlng[i]);  
	  //latlngbounds.extend(latlng[i]);
	  var point = new GLatLng(latlng[i]);
	  latlngbounds.extend(point);
	}
	map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );
	
	//map.setCenter(new GLatLng(47.6, -100.89), 13);
	var customUI = map.getDefaultUI();
	customUI.controls.scalecontrol = false;
	customUI.controls.menumaptypecontrol  = true;
	map.setUI(customUI);
  }
} 
</script>
</head>

<body onload="initialize()">
    <div id="mapPane_gmap" style="height:400px; width:700px; margin-left: 0px;"> 
    </div>   
</body>
<HEAD>
</HEAD>
</html>

Open in new window

0
Comment
Question by:lvmllc
3 Comments
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 34117818
Can't really follow all your code above, but I can offer what I hope is a little helpful.  Google changed the API last summer.  See if any of the ideas here are helpful:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_3350-Using-the-Google-Maps-API-in-PHP.html
0
 
LVL 13

Accepted Solution

by:
Molnar István earned 1000 total points
ID: 34138344
i modified a little bit your code, cause i'm not familiar with php  (i used an array of random generated coords)
i think the problems are:
-you should add the var map; before the function
-i usually add the addcontrol after i initialize the map
-add a center : map1.setCenter( new google.maps.LatLng( 0, 0 ), 0 ); after initialize the map
-(i think the main problem was that ) you didn't add any markers to the map

i tried my code in firefox and ie and works well

i hope that it will work for you too


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zoom to extents</title>
<link href="../css/layout.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAu6sjqcmGfoqTHmTvfkq0ChSpkSOrz0Cwg3N68il0aaFJTpnuCBQxjGoicyV8T8a1Pm6s99H3kAGuoA" type="text/javascript"></script>



<script language="Javascript" type="text/javascript"> 
var map1;
function initialize() {	  


  if (GBrowserIsCompatible()) {     
  var latlng = [
      new google.maps.LatLng( 46 + Math.random( ), -120 + Math.random( ) * 2 ),
      new google.maps.LatLng( 46 + Math.random( ), -120 + Math.random( ) * 2 ),
      new google.maps.LatLng( 46 + Math.random( ), -120 - Math.random( ) * 2 ),
      new google.maps.LatLng( 46 + Math.random( ), -120 - Math.random( ) * 2 ),
      new google.maps.LatLng( 46 - Math.random( ), -120 + Math.random( ) * 2 ),
      new google.maps.LatLng( 46 - Math.random( ), -120 + Math.random( ) * 2 ),
      new google.maps.LatLng( 46 - Math.random( ), -120 - Math.random( ) * 2 ),
      new google.maps.LatLng( 46 - Math.random( ), -120 - Math.random( ) * 2 )
    ];
	map1 = new GMap2(document.getElementById("mapPane_gmap"));
	 map1.addControl( new google.maps.LargeMapControl3D( ) );
      map1.addControl( new google.maps.MenuMapTypeControl( ) );
      map1.setCenter( new google.maps.LatLng( 0, 0 ), 0 );


	
	var latlngbounds = new GLatLngBounds( );

	for ( var i = 0; i < latlng.length; i++ ){
	  alert(latlng[i]);  
	   var marker = new google.maps.Marker( latlng[i] );
       map1.addOverlay( marker );
	  
	}
	for ( var i = 0; i < latlng.length; i++ ){
		latlngbounds.extend(latlng[i]);
	}
	 map1.setCenter( latlngbounds.getCenter( ), map1.getBoundsZoomLevel( latlngbounds ) );

	

  }
} 
</script>
</head>

<body onload="initialize()">
    <div id="mapPane_gmap" style="height:400px; width:700px; margin-left: 0px;"> 
    </div>   
</body>
<HEAD>
</HEAD>
</html>

Open in new window

0
 

Author Closing Comment

by:lvmllc
ID: 34142106
Worked great.  I just put the following in and I was good to go

var latlng = [
      new google.maps.LatLng( <?php echo  $coord1;?> ),
      new google.maps.LatLng( <?php echo  $coord2;?> )
    ];
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question