Solved

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

Posted on 2010-11-11
3
1,360 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 109

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Adding Row and Cell on a table 14 25
alert(innerHTML); 8 32
Html Newline 7 21
asp.net open new page without popup blocker 8 19
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

821 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