Link to home
Start Free TrialLog in
Avatar of Cybervanes
Cybervanes

asked on

GOOGLE MAPS FLASH API

I have multiple points on a Google map that i need to pinpoint.

How would i find the two points that are farthest away from each other so my map centers an zooms accordingly?

Thanks in advance!
// AS3
var listings = "39.170147, -108.723128 |  39.019184, -108.544922 | 39.1046810,-108.5621000 | 37.3960539,-108.6274138 | 38.4783198,-107.8761738 | 38.2183239,-108.5687033 | 38.7422062,-108.0689582";
var listings_array = listings.split(" | ");
 
// this function gets the center between two point A lat lng and point B //  
var bounds:LatLngBounds = new LatLngBounds(    new LatLng(A_Lat,A_Long),    new LatLng(B_Lat,B_Lng));
map.setCenter(bounds.getCenter());
map.setZoom(map.getBoundsZoomLevel(bounds)-1);

Open in new window

Avatar of Designbyonyx
Designbyonyx
Flag of United States of America image

For each marker, you are going to need a GLatLng position.

So create a GLatLngBounds object, and extend it with each markers position.

Then center and zoom the map on those coordinates.
var latlngbounds = new GLatLngBounds();
 
var posn1 = new GLatLng([latValue], [lngValue]);
latlngbounds.extend( posn1 );
// create the marker here
 
var posn2 = new GLatLng([latValue], [lngValue]);
latlngbounds.extend( posn2 );
// create the marker here
 
var posn3 = new GLatLng([latValue], [lngValue]);
latlngbounds.extend( posn3 );
// create the marker here
 
// Do this after all your markers have been added to the map
map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );

Open in new window

Avatar of Cybervanes
Cybervanes

ASKER

Ok I'll give it a shot!
Thanks!

//global imports and other vars
import com.google.maps.LatLng;
import com.google.maps.LatLngBounds;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
import com.google.maps.InfoWindowOptions;
import com.google.maps.MapMouseEvent;
 
 
// Create The Map
var map:Map = new Map();
map.key = "ABQIAAAAZ4-AGoBfSWF--cPxVyDw6xQQ8YLcfBN-1RQFlkdO0I7IxZjd6BRlMLFMneQgUlcJXEpgttoMjsUpxw";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
var i = 0;
function onMapReady(event:MapEvent):void {
	
var latlngbounds = new LatLngBounds();	
    map.setCenter(new LatLng(39.019184,-108.544922),3, MapType.HYBRID_MAP_TYPE);
    map.addControl(new ZoomControl());
    map.addControl(new PositionControl());
    map.addControl(new MapTypeControl()); 
 
	function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {
               var LA_i:Marker = new Marker( latlng, new MarkerOptions({
														   icon:new marker(),
                                                           hasShadow: true,
				                                           tooltip: ""+tip  
                                                          }));// closed new marker
			   LA_i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void {
					trace ("marker "+tip+" clicked!");
			   });// closed on click event listener
               return LA_i;
			   var i = new LatLng(latlng);
			   latlngbounds.extend( i );
			   return i;
			   i = i+1;
      }// end function createMarker
 
var listings = "39.170147, -108.723128 |  39.019184, -108.544922 | 39.1046810,-108.5621000 | 37.3960539,-108.6274138 | 38.4783198,-107.8761738 | 38.2183239,-108.5687033 | 38.7422062,-108.0689582 |";
var listings_array = listings.split("|");
// loop through EACH LISTING AND CALL CREATE MARKER FUNTION
for(var LA_i=0; LA_i<listings_array.length-1; LA_i++){
	var listingInfo = listings_array[LA_i].split(",");
	var latlng:LatLng = new LatLng(listingInfo[0], listingInfo[1]);
		 var tip = LA_i;
		 var myTitle:String = "";
		 var myContent:String = "";
		 
		 map.addOverlay(createMarker(latlng,LA_i, tip, myTitle, myContent));
		 
}//end main listing forloop
 
// SET CENTER AND ZOOM
map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );

Open in new window

if you take the above code and past it into the root time line of a test FLA it will pull a map with correct markers.

I still can't get the map to center and zoom appropriately.

any ideas?
Another option, if you have a lot of markers to add, calculate the min lat and max lat, min long and max long.  Once you have those, divide all four by 2 or multiply by .5 then add those numbers to the min long and min lat respectively.  This will give you the center latlng at least.
ASKER CERTIFIED SOLUTION
Avatar of Designbyonyx
Designbyonyx
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
after hours upon hours of testing different things out I'm on to other issues! haha...

I thought it only fair to share my fixed script of this issue for others that may be learning the Google API for flash. below is the AS3 script that zooms and centers appropriately.

thanks to all for the help!

-Cybervanes
var listings = "  38.4783198,-107.8761738 | 39.1046810,-108.5621000 | 39.170147,-108.723128 | 39.019184,-108.544922 | 37.3960539,-108.6274138 | 38.2183239,-108.5687033 | 38.7422062,-108.0689582 |";
 
var listings_array = listings.split("|");
trace('listings_array[0]='+listings_array[0]+'listings_array[1]'+listings_array[1]);
if(listings_array.length > 1){
	var listings_array_0 = listings_array[0].split(",");
	var listings_array_1 = listings_array[1].split(",");
	var bounds:LatLngBounds = new LatLngBounds(new LatLng(listings_array_0[0],listings_array_0[1]));
	trace('should have zoomed bounds'+bounds.toString());
	for(var i=2; i  <= listings_array.length-2; i = i+1){
		var ll = listings_array[i].split(",");
		trace('ll = '+ll[0]+' and '+ll[1]);
		bounds.extend(new LatLng(ll[0],ll[1]));
	}
	map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds), MapType.HYBRID_MAP_TYPE );
}else{
var ll = listings_array[0].split(",");
map.setCenter(new LatLng(ll[0],ll[1]),9, MapType.HYBRID_MAP_TYPE );
}
// loop through each listing an create a marker
for(var LA_i=0; LA_i<listings_array.length-1; LA_i++){
	var listingInfo = listings_array[LA_i].split(",");
	var latlng:LatLng = new LatLng(listingInfo[0], listingInfo[1]);
		 var tip = LA_i;
		 var myTitle:String = "";
		 var myContent:String = "";		 
		 map.addOverlay(createMarker(latlng,LA_i, tip, myTitle, myContent));
		 
}//end main listing for loop

Open in new window

thanks but still didn't fix the problem i posted about.