Solved

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

Posted on 2010-11-11
3
1,380 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 110

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 250 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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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 code hide show and toggles. 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…

717 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