?
Solved

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

Posted on 2010-11-11
3
Medium Priority
?
1,393 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to implement server side field validation and display customized error messages to the client.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
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

762 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