asked on

Google Maps

We have an application where we want to let the web site visitor select multiple properties by specifying a zip code or a neighborhood & then mapping all these as points on a google map.

All the properties are in a database so I have the zip, neighborhood, etc & the street address of all properties

I think I figured out how to do this but the issue then becomes the centering & the zoom level of the map.

I think I want to display a rectangular map where all the farthest seperated points are in the map. So I think I can figure that by finding the greatest Lat & Long seperations.

What I don't understand is the map "zoom level" . How can I detect what zoom level to use so that ALL the property points are shown on the map? Obviously I want the highest zoom level where they will all fit.

How can I do that?

neeraj523

Hello

Let google map handle this for you. When u define various pointers on google map, it adjusts its zoom automatically to show all the points at one screen.

Richard Korts

ASKER

To neeraj523:

It does not seem to work that way, I had hoped that it would. It will show all the points if the zoom level is far enough out, otherwise not.

See the code below. Note the zoom level is set to 13. See the result at http://www.rkassoc.us/Houstonmod/multi_addr_test13.asp.

Now, if I change the zoom level to 11, see the result at http://www.rkassoc.us/Houstonmod/multi_addr_test.asp. All the points are shown but the zoom is too far out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API Example: 	Extraction of Geocoding Data</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAnEDt70wgznfuJ8i329NQhBRpZUokAJ0olkuSG6JKaVlusBr3cBRsgyjHgbh8djwxNJ3-rdxCJDYPQQ" type="text/javascript"></script>
    <script type="text/javascript">
	var addrs = new Array();
	addrs[0] = "5401 Palmer Street, Houston, TX";
	addrs[1] = "3780 Gramercy Boulevard, Houston, TX";
	addrs[2] = "3830 Richmond Avenue, Houston, TX";
	naddr = 3;
    var map;
    var geocoder;
 
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(29.75, -95.35), 13);
        geocoder = new GClientGeocoder();
      }
    }
 
    // addAddressToMap() is called when the geocoder returns an
    // answer.  It adds a marker to the map with an open info window
    // showing the nicely formatted version of the address and the country code.
    function addAddressToMap(response) {
      if (!response || response.Status.code != 200) {
        alert("Sorry, we were unable to geocode that address");
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point);
        map.addOverlay(marker);
      }
    }
 
    // showLocation() is called when you click on the Search button
    // in the form.  It geocodes the address entered into the form
    // and adds a marker to the map at that location.
    function showLocation() {
      var address = document.forms[0].q.value;
      geocoder.getLocations(address, addAddressToMap);
    }
 
   // findLocation() is used to enter the sample addresses into the form.
    function findLocation(address) {
      document.forms[0].q.value = address;
      showLocation();
    }
	function map_addresses() {
		for (i = 0; i < naddr; i++) {
			findLocation(addrs[i]);
		}	
	}
    </script>
  </head>
 
  <body onload="initialize(); map_addresses();">
    <form action="#" onsubmit="showLocation(); return false;">
      <p>
        <input type="hidden" name="q" value="" class="address_input" size="40" />
      </p>
    </form>
    <!-- Creates a simple input box where you can enter an address
         and a Search button that submits the form. //-->
    <div id="map_canvas" style="width: 800px; height: 400px"></div>
 
 
  </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

neeraj523

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Richard Korts

ASKER

Excellent, works perfectly.

Thanks

Richard Korts

ASKER

To neeraj523:

FYI, the code you sent does not work in FireFox. I had to move the other functions OUT of function load.

rkorts

neeraj523

Hello

Were you able to run it in FF now ?? If not i will look into it..