Solved

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

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Read text on Table 7 46
Validating number not work with decimal 4 42
Scroll 5 news at a time using vticker 2 38
Horizontal Full Calendar using php 5 38
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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 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)

738 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