Need examples/assistance with Zoom to Selected from Drop Down Menu (Fusion Tables)

178 views
Skip to first unread message

Amelia Griza-Padilla

unread,
Aug 18, 2011, 2:16:40 PM8/18/11
to google-map...@googlegroups.com
Hello,
I am a beginner to Google Maps Javascript API (about 2 weeks now) and I need some assistance.  I have created two drop down menus linked to my fusion tables.  What I am trying to do is: upon clicking on a selection zoom to that polygon (or lat/long).   I've found some ideas, but have no idea how to incorporate this in my map. So far I've added "value="35.286125,-120.659409" to one of records but nothing happens.
 
select id="searchString" onChange="javascript:LocChange(this);">
            <option value="">--All Districts--</option>
            <option value="Achadjian, Katcho   33" value="35.286125,-120.659409">Achadjian, Katcho   33</option>
 
Any assistance would be greatly appreciated.
 

JKurtock

unread,
Aug 18, 2011, 4:12:35 PM8/18/11
to Google Maps JavaScript API v3
In changeMap2 (your linked map doesn't have "LocChange()") try:
function changeMap2(theValue) {
map.panTo(new google.maps.LatLng(theValue.split(','));
}
panTo: http://code.google.com/intl/en/apis/maps/documentation/javascript/reference.html#Map
split: http://msdn.microsoft.com/en-us/library/t5az126b(v=VS.85).aspx

split returns an array (in this case, two strings with floating point
numbers), and LatLng requires two values. I don't know whether passing
an array of two values to LatLng will work. But you'll tell us, won't
you?

- Jeff


On Aug 18, 11:16 am, Amelia Griza-Padilla <ameliagpadi...@gmail.com>
wrote:

Amelia Griza-Padilla

unread,
Aug 18, 2011, 8:13:34 PM8/18/11
to Google Maps JavaScript API v3
Hi Jeff,
Sorry I'm really a novice, what I tried was

function changeMap() {
var searchString =
document.getElementById('searchString').value.replace("'", "\\'");
if(searchString == "") {
layer.setQuery("SELECT 'geometry' FROM " + tableid);
return;
}
layer.setQuery("SELECT 'geometry' FROM " + tableid + " WHERE 'name'
= '" + searchString + "'");
}

{
function changeMap2(theValue) {
map.panTo(new google.maps.LatLng(theValue.split(','));
var searchString2 =
document.getElementById('searchString2').value.replace("'", "\\'");
if(searchString2 == "") {
layer2.setQuery("SELECT 'geometry' FROM " + tableid2);
return;
}
layer2.setQuery("SELECT 'geometry' FROM " + tableid2 + " WHERE
'name' = '" + searchString2 + "'");
}
}

Is that what you meant? If so, unfortunately it didn't work.

Any examples of this type of query or other suggestions?

Thx,
Amelia

On Aug 18, 1:12 pm, JKurtock <jkurt...@gmail.com> wrote:
> In changeMap2 (your linked map doesn't have "LocChange()") try:
> function changeMap2(theValue) {
> map.panTo(new google.maps.LatLng(theValue.split(','));}
>
> panTo:http://code.google.com/intl/en/apis/maps/documentation/javascript/ref...
> split:http://msdn.microsoft.com/en-us/library/t5az126b(v=VS.85).aspx
>
> split returns an array (in this case, two strings with floating point
> numbers), and LatLng requires two values. I don't know whether passing
> an array of two values to LatLng will work.  But you'll tell us, won't
> you?
>
> - Jeff
>
> On Aug 18, 11:16 am, Amelia Griza-Padilla <ameliagpadi...@gmail.com>
> wrote:
>
>
>
> > Hello,
> > I am a beginner to Google Maps Javascript API (about 2 weeks now) and I need
> > some assistance.  I have created two drop down menus linked to my fusion
> > tables.  What I am trying to do is: upon clicking on a selection zoom to
> > that polygon (or lat/long).   I've found some ideas, but have no idea how to
> > incorporate this in my map. So far I've added "value="35.286125,-120.659409"
> > to one of records but nothing happens.
>
> > select id="searchString" onChange="javascript:LocChange(this);">
> >             <option value="">--All Districts--</option>
> >             <option value="Achadjian, Katcho   33"
> > value="35.286125,-120.659409">Achadjian, Katcho   33</option>
>
> > Any assistance would be greatly appreciated.
>
> >http://www.advocacy.ucla.edu/Maps/Assembly_Map.html- Hide quoted text -
>
> - Show quoted text -

geoco...@gmail.com

unread,
Aug 18, 2011, 11:25:11 PM8/18/11
to Google Maps JavaScript API v3
On Aug 18, 11:16 am, Amelia Griza-Padilla <ameliagpadi...@gmail.com>
wrote:
Sounds like you want something like this:
http://www.geocodezip.com/geoxml3_test/v3_FusionTables_CountryBrowser.html
(if you click on the "show" in the sidebar, or the zoomTo in the
infowindow, it zooms to the polygon)

But it won't necessarily be simple.

-- Larry

geoco...@gmail.com

unread,
Aug 19, 2011, 3:37:57 AM8/19/11
to Google Maps JavaScript API v3
On Aug 18, 8:25 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:
> On Aug 18, 11:16 am, Amelia Griza-Padilla <ameliagpadi...@gmail.com>
> wrote:
> > Hello,
> > I am a beginner to Google Maps Javascript API (about 2 weeks now) and I need
> > some assistance.  I have created two drop down menus linked to my fusion
> > tables.  What I am trying to do is: upon clicking on a selection zoom to
> > that polygon (or lat/long).   I've found some ideas, but have no idea how to
> > incorporate this in my map. So far I've added "value="35.286125,-120.659409"
> > to one of records but nothing happens.
>
> > select id="searchString" onChange="javascript:LocChange(this);">
> >             <option value="">--All Districts--</option>
> >             <option value="Achadjian, Katcho   33"
> > value="35.286125,-120.659409">Achadjian, Katcho   33</option>
>
> > Any assistance would be greatly appreciated.
>
> >http://www.advocacy.ucla.edu/Maps/Assembly_Map.html
>
> Sounds like you want something like this:http://www.geocodezip.com/geoxml3_test/v3_FusionTables_CountryBrowser...
> (if you click on the "show" in the sidebar, or the zoomTo in the
> infowindow, it zooms to the polygon)
>
> But it won't necessarily be simple.

Is this what you are looking for?
http://www.geocodezip.com/geoxml3_test/www_advocacy_ucla_edu_Assembly_MapC.html


  -- Larry

Amelia Griza-Padilla

unread,
Aug 22, 2011, 4:28:38 PM8/22/11
to Google Maps JavaScript API v3
Larry,
This is exactly what I have been trying to do. Thank you! But having
a problem, I inserted the code, but nothing happended?? Any ideas why
this exact code would not work on my page?

http://www.advocacy.ucla.edu/Maps/Assembly.html

On Aug 19, 12:37 am, "geocode...@gmail.com" <geocode...@gmail.com>
> Is this what you are looking for?http://www.geocodezip.com/geoxml3_test/www_advocacy_ucla_edu_Assembly...
>
>    -- Larry- Hide quoted text -

geoco...@gmail.com

unread,
Aug 22, 2011, 9:46:51 PM8/22/11
to Google Maps JavaScript API v3
On Aug 22, 1:28 pm, Amelia Griza-Padilla <ameliagpadi...@gmail.com>
wrote:
> Larry,
> This is exactly what I have been trying to do. Thank you!  But having
> a problem, I inserted the code, but nothing happended??  Any ideas why
> this exact code would not work on my page?
>
> http://www.advocacy.ucla.edu/Maps/Assembly.html

Check your javascript errors:
Error: geoXML3 is not defined
Source File: http://www.advocacy.ucla.edu/Maps/Assembly.html
Line: 138

You didn't put this file on your server:
http://www.advocacy.ucla.edu/Maps/geoxml3_kmlStr.js
The page cannot be found
The page you are looking for might have been removed, had its name
changed, or is temporarily unavailable.

-- Larry

Amelia Griza-Padilla

unread,
Aug 23, 2011, 4:11:51 PM8/23/11
to Google Maps JavaScript API v3
Hi Larry,
Thanks for your patience, so I added the geoxml3_kmlStr.js file to my
server
http://www.advocacy.ucla.edu/Maps/geoxml3_kmlStr.js, but still nothing
happens? I downloaded it from http://code.google.com/p/geoxml3/

Am I missing anything else?

http://www.advocacy.ucla.edu/Maps/Assembly.html


On Aug 22, 6:46 pm, "geocode...@gmail.com" <geocode...@gmail.com>
> > > - Show quoted text -- Hide quoted text -

geoco...@gmail.com

unread,
Aug 23, 2011, 5:44:33 PM8/23/11
to Google Maps JavaScript API v3
On Aug 23, 1:11 pm, Amelia Griza-Padilla <ameliagpadi...@gmail.com>
wrote:
> Hi Larry,
> Thanks for your patience, so I added the geoxml3_kmlStr.js file to my
> server
http://www.advocacy.ucla.edu/Maps/geoxml3_kmlStr.js

That doesn't look like the correct file. The version on my server is
modified from the archive.

> , but still nothing
> happens? I downloaded it from

http://code.google.com/p/geoxml3/

>
> Am I missing anything else?

You still have javascript errors:
(this one is probably because it is the wrong file)
Error: missing } after property list
Source File: http://www.advocacy.ucla.edu/Maps/geoxml3_kmlStr.js
Line: 53, Column: 27
Source Code:
docs.push({url: urls remaining: 1});

Error: geoXML3 is not defined
Source File: http://www.advocacy.ucla.edu/Maps/Assembly.html
Line: 139

Amelia Griza-Padilla

unread,
Aug 23, 2011, 6:22:53 PM8/23/11
to Google Maps JavaScript API v3
Can you hear me screaming with joy?!! I finally got it, Larry thank
you sooo much!
http://www.advocacy.ucla.edu/Maps/Assembly_map.html


On Aug 23, 2:44 pm, "geocode...@gmail.com" <geocode...@gmail.com>

geoco...@gmail.com

unread,
Sep 10, 2011, 1:11:03 PM9/10/11
to Google Maps JavaScript API v3
On Aug 23, 6:22 pm, Amelia Griza-Padilla <ameliagpadi...@gmail.com>
wrote:
> Can you hear me screaming with joy?!!  I finally got it, Larry thank
> you sooo much!http://www.advocacy.ucla.edu/Maps/Assembly_map.html

FYI - To avoid the confusion in the future, I have put the
parseKmlString method in the mainline geoxml3 release.

-- Larry

>
> On Aug 23, 2:44 pm, "geocode...@gmail.com" <geocode...@gmail.com>
> wrote:
>
>
>
>
>
>
>
> > On Aug 23, 1:11 pm, Amelia Griza-Padilla <ameliagpadi...@gmail.com>
> > wrote:> Hi Larry,
> > > Thanks for your patience, so I added thegeoxml3_kmlStr.jsfile to my
Reply all
Reply to author
Forward
0 new messages