where to paste code?

3 views
Skip to first unread message

zoe...@googlemail.com

unread,
May 22, 2008, 7:17:45 AM5/22/08
to Google AJAX API
I want to use the Google AJAX Search API to create a search on my map
http://farmshopslincolnshire.co.uk/map.html so that when a place name
is typed in it zooms in on that area showing the markers within that
area. I have the code from the documentation:

// Load the Code
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=USE-
YOUR-MAPS-KEY"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/
gmlocalsearch.js"
type="text/javascript"></script>
// Load the Style Sheets
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
@import url("http://www.google.com/uds/solutions/localsearch/
gmlocalsearch.css");
</style>

and

map.addControl(new google.maps.LocalSearch());

however where do these need to go within my exisiting code?

Thanks

jgeerdes [AJAX APIs "Guru"]

unread,
May 22, 2008, 7:53:05 AM5/22/08
to Google AJAX API
Well, since you've already got your map up and running, all you really
need is this portion:

<script src="http://www.google.com/uds/solutions/localsearch/
gmlocalsearch.js" type="text/javascript">
...
</style>

Copy and paste this into your code directly below the existing <script
src="http://maps.google.com...">'s closing tag (which is on the line
below where it starts)

Then, add the map.addControl(...) bit directly after the line reading
map.addControl(new GSmallMapControl());

That should add the gm.LocalSearch control for you. However, I don't
know that you're going to like what it will do for you. Generally
speaking, it will find the area you enter into the search control, but
it will also find up to 8 other businesses, etc., in that same area
and zoom as close as it can to see all of those entries. It will also
place markers on all of them, possibly obscuring your own markers. So
you may want to build your own custom control that won't place markers
but only center and zoom on the specified area.

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
http://jgeerdes.home.mchsi.com
jgee...@mchsi.com

If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!

zoe...@googlemail.com

unread,
May 22, 2008, 8:15:54 AM5/22/08
to Google AJAX API
I wouldnt know where to start creating my own search, would it be very
difficult?

Thanks

On May 22, 12:53 pm, "jgeerdes [AJAX APIs \"Guru\"]"
> jgeer...@mchsi.com

jgeerdes [AJAX APIs "Guru"]

unread,
May 22, 2008, 9:18:11 AM5/22/08
to Google AJAX API
Well, the answer to that question depends on your exact situation. In
general, if I was going to start from scratch and build a custom
search, I would start with HTML and Javascript tutorials (readily
available for free via the internet) if I didn't already have a
working knowledge of the two. Then, I would look in the API
documentation, linked below, to find code snippets and application
samples that I could use to glean concepts and tidbits. The dev team
really has done a great job of supplying a number of diverse resources
that you can use to get up to speed on the API relatively quickly.
But again, if you don't have a working knowledge - and by that, I mean
you can code a basic HTML page and a few rudimentary scripts on your
own - of HTML and Javascript, you'll definitely want to go through at
least one tutorial of each.

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
http://jgeerdes.home.mchsi.com
jgee...@mchsi.com

zoe...@googlemail.com

unread,
May 22, 2008, 11:27:52 AM5/22/08
to Google AJAX API
I had a look over some tutorials for javascript, however I have no
idea how I would use any of the info from the tutorials to create a
search for the map! Perhaps I should just make my markers zoom in on
there area when clicked, what code would I need to add to my markers
to do this?

Thanks!

On May 22, 2:18 pm, "jgeerdes [AJAX APIs \"Guru\"]"
> jgeer...@mchsi.com

jgeerdes [AJAX APIs "Guru"]

unread,
May 22, 2008, 2:00:02 PM5/22/08
to Google AJAX API
GEvent.addListener(marker,'click',function()
{map.setCenter(marker.getLatLng(),map.getZoom()<map.getCurrentMapType().getMaximumResolution()?
map.getZoom()+1:undefined);});

Remember, marker and map are tokens; you'll need to replace them
appropriately. It'll also make sure that you don't go over the
maximum resolution for the map type.

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
http://jgeerdes.home.mchsi.com
jgee...@mchsi.com

zoe...@googlemail.com

unread,
May 22, 2008, 2:30:12 PM5/22/08
to Google AJAX API
Do I just need to add that under the marker code, what, if anything
needs to be added?

Thank you!

Zoe

On May 22, 7:00 pm, "jgeerdes [AJAX APIs \"Guru\"]"
<jgeer...@mchsi.com> wrote:
> GEvent.addListener(marker,'click',function()
> {map.setCenter(marker.getLatLng(),map.getZoom()<map.getCurrentMapType().get MaximumResolution()?
> map.getZoom()+1:undefined);});
>
> Remember, marker and map are tokens; you'll need to replace them
> appropriately.  It'll also make sure that you don't go over the
> maximum resolution for the map type.
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>
> For more information or a project quote:http://jgeerdes.home.mchsi.com
> jgeer...@mchsi.com

jgeerdes [AJAX APIs "Guru"]

unread,
May 22, 2008, 2:32:12 PM5/22/08
to Google AJAX API
Yeah, that should fix you up. Just remember to replace the tokens as
necessary. I'm not looking at your map right now, so I can't recall
if map was the handle you used for the map, and marker will have to be
changed appropriately for each one.

jg

zoe...@googlemail.com

unread,
May 22, 2008, 2:35:36 PM5/22/08
to Google AJAX API
so the word marker needs to be replaced with the name of my custom
marker? Also I dont suppose you know how to make my markers links so
that when they are clicked on the redirect to another web page?

Thanks

Zoe

On May 22, 7:32 pm, "jgeerdes [AJAX APIs \"Guru\"]"

jgeerdes [AJAX APIs "Guru"]

unread,
May 22, 2008, 2:49:26 PM5/22/08
to Google AJAX API
Looking at your code, map should be fine, but you'll want to replace
marker (but only in the function here) with "this":

GEvent.addListener(marker,'click',function()
{map.setCenter(this.getLatLng(),map.getZoom()<map.getCurrentMapType().getMaximumResolution()?
map.getZoom()+1:undefined);});

And you should be able to use the same method to redirect to another
page:

GEvent.addListener(marker,'click',function()
{window.location.href="http://www.mysite.com/my/new/path.html";});

jg

zoe...@googlemail.com

unread,
May 22, 2008, 2:57:11 PM5/22/08
to Google AJAX API
when I add the code and refresh my map it goes blank, have a pasted it
into the correct place?

var point = new GLatLng(53.59, -.65);
var marker = new GMarker(point, baseIcon);
map.addOverlay(marker);
GEvent.addListener(marker,'click',function()
{map.setCenter(this.getLatLng(),map.getZoom()<map.getCurrentMapType().getMa
ximumResolution()?
map.getZoom()+1:undefined);});

Thanks again!!

Zoe

On May 22, 7:49 pm, "jgeerdes [AJAX APIs \"Guru\"]"

zoe...@googlemail.com

unread,
May 22, 2008, 3:05:03 PM5/22/08
to Google AJAX API
Map is there now, though when I click the marker nothing happens, (its
the marker closest to the - zoom control near the word hatfield)

On May 22, 7:57 pm, "zoe....@googlemail.com" <zoe....@googlemail.com>
wrote:

zoe...@googlemail.com

unread,
May 22, 2008, 3:10:35 PM5/22/08
to Google AJAX API
Nevermind it works now!

Thanks

On May 22, 8:05 pm, "zoe....@googlemail.com" <zoe....@googlemail.com>
wrote:
Reply all
Reply to author
Forward
0 new messages