Using fitBounds or setCenter

294 views
Skip to first unread message

Bill

unread,
Apr 22, 2011, 12:01:28 PM4/22/11
to Google Maps JavaScript API v3
I'm new to JavaScript and Google Maps, but managed to cobble together
a series of maps for that do about 90 percent of what I want to do.

The maps are here: http://bilware.net/BullyMap/BullyMap.html

What I want users to be able to do is:

1) Choose a map (this works)
1a) Click on a district to see info details for that district (this
works)
2) Alternatively, choose a specific district from a dropdown box (this
works)
2a) Have the map display only the chosen district (this works)
2b) Have the map automatically center and zoom in on the chosen
district

It's this last part I can't figure out. I can use map.setZoom to
resize to an appropriate fixed zoom level, but I can't figure out how
to re-orient the center. It looks like fitBounds should do the trick,
but I can't figure out how to work it or setCenter into the function
successfully.

The fact is, I'm a coding novice who relies on a lot of trial and
error using the snippets I find online. However, I can't seem to find
anything that quite matches what I'm attempting. And with this project
set to go live pretty soon, I need to turn to the experts out there.

Appreciate any help.

-BW

George Woodring

unread,
Apr 22, 2011, 2:43:08 PM4/22/11
to google-map...@googlegroups.com
This is how I set the bounds on my map so that each user sees his area specifically.  The bounds will set the center and the zoom automatically.

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Fetch bounding box via ajax or however you want

var swPoint = new google.maps.LatLng( lat, lng)
var nePoint = new google.maps.LatLng(lat, lng)

var bounds = new google.maps.LatLngBounds(swPoint, nePoint);

map.fitBounds(bounds);

Hope this helps,
George


On Fri, Apr 22, 2011 at 12:01 PM, Bill <bil...@gmail.com> wrote:

2b) Have the map automatically center and zoom in on the chosen
district

It's this last part I can't figure out. I can use map.setZoom to
resize to an appropriate fixed zoom level, but I can't figure out how
to re-orient the center. It looks like fitBounds should do the trick,
but I can't figure out how to work it or setCenter into the function
successfully.


--
iGLASS Networks
www.iglass.net

geoco...@gmail.com

unread,
Apr 22, 2011, 2:49:05 PM4/22/11
to Google Maps JavaScript API v3
On Apr 22, 9:01 am, Bill <bilw...@gmail.com> wrote:
> I'm new to JavaScript and Google Maps, but managed to cobble together
> a series of maps for that do about 90 percent of what I want to do.
>
> The maps are here:http://bilware.net/BullyMap/BullyMap.html
>
> What I want users to be able to do is:
>
> 1) Choose a map (this works)
> 1a) Click on a district to see info details for that district (this
> works)
> 2) Alternatively, choose a specific district from a dropdown box (this
> works)
> 2a) Have the map display only the chosen district (this works)
> 2b) Have the map automatically center and zoom in on the chosen
> district
>
> It's this last part I can't figure out. I can use map.setZoom to
> resize to an appropriate fixed zoom level, but I can't figure out how
> to re-orient the center. It looks like fitBounds should do the trick,
> but I can't figure out how to work it or setCenter into the function
> successfully.

I can think of two options:
1. store your preferred center and zoom level or bounds in a column in
the FusionTable, query for it and use it when you display the map.
2. query the fusion table for the geometry column associated with the
district being displayed, parse the kml, find the bounds of that
polygon and use that as an argument to fitBounds.

You could also vote for this issue:
http://code.google.com/p/fusion-tables/issues/detail?id=298

or create an enhancement request to let you do that (but that may not
happen quickly).

-- Larry
Reply all
Reply to author
Forward
0 new messages