URL parameters + change URL on marker interaction

274 views
Skip to first unread message

hoodsanddrops

unread,
Sep 16, 2011, 6:41:41 AM9/16/11
to google-map...@googlegroups.com
Hi Everyone,

I have used the titorials to create a map which displays markers through the mySQL, PHP and XML. I've been trying to understand how I might be able to deep link to my infowindows.

What I'd like to achieve:
  • Direct users to my map and open an infowindow using some parameters, something like www.mydomain.com?=somename
  • Change the URL in the address bar when a marker is clicked so that it's possible to share that URL and the corresponding data (infowindow) that displays when that URL is clicked.
I've seen Mikes tutorials but they don't really address my wants. I'm a total hacker so be gentle please.

Here's where I'm currently at


Any help or pointers to tutorials would be really helpful.

Thanks.

geoco...@gmail.com

unread,
Sep 17, 2011, 10:26:32 AM9/17/11
to Google Maps JavaScript API v3
On Sep 16, 6:41 am, hoodsanddrops <odi...@gmail.com> wrote:
> Hi Everyone,
>
> I have used the titorials to create a map which displays markers through the
> mySQL, PHP and XML. I've been trying to understand how I might be able to
> deep link to my infowindows.
>
> What I'd like to achieve:
>
>    - Direct users to my map and open an infowindow using some parameters,
>    something likewww.mydomain.com?=somename
>    - Change the URL in the address bar when a marker is clicked so that it's
>    possible to share that URL and the corresponding data (infowindow) that
>    displays when that URL is clicked.
>
> I've seen Mikes tutorials but they don't really address my wants.

This is a v3 example of Mike's "linkto" page.
http://www.geocodezip.com/v3_MW_example_linktomap.html?id=Marker%20Two&lat=43.958475&lng=-80.001929&zoom=7&type=m

It achieves your first and can be modified for the second (but I
wouldn't do that myself, in my opinion reloading the page when the
user clicks on a marker would not provide a good user experience).

-- Larry

xelawho

unread,
Sep 17, 2011, 11:43:43 AM9/17/11
to Google Maps JavaScript API v3
> >    - Change the URL in the address bar when a marker is clicked so that it's
> >    possible to share that URL and the corresponding data (infowindow) that
> >    displays when that URL is clicked.

what would probably be easier (and smoother) would be replicating the
Google maps "link to this map" functionality, where the url displayed
in an input box (not the address bar) changes depending on which
marker is clicked.

hoodsanddrops

unread,
Sep 19, 2011, 5:24:54 AM9/19/11
to google-map...@googlegroups.com
Yep, I've seen Mikes tutorial and it's complicated. 

Is there a simpler way of achieving the same thing?




Andrew Leach

unread,
Sep 19, 2011, 5:38:37 AM9/19/11
to google-map...@googlegroups.com
On 19 September 2011 10:24, hoodsanddrops <odi...@gmail.com> wrote:
> Yep, I've seen Mikes tutorial and it's complicated.
> Is there a simpler way of achieving the same thing?

Not really. It would be helpful to say what you're having difficulty with.

I have Version 2 code at
http://www.achurchnearyou.com/parishfinder.php?=51.1171,-0.562,12,51.1318,-0.5222,Map
which takes the parameters and reconstructs the map. The url is
updated as the map is manipulated and it's shown when the dot-marker
is clicked -- just like xelawho's suggestion in this thread, actually.
Slightly different from your requirement but the concept may be
transferable. [But the script also does a lot of other stuff as well
which you may need to unravel]

An alternative implementation would be to include the url as a line in
the infoWindow which could be clicked or copied.

hoodsanddrops

unread,
Sep 19, 2011, 10:52:20 AM9/19/11
to google-map...@googlegroups.com, andrew....@gmail.com
I'm not sure about how this new Ajaxy forum works. Sorry Andrew you may have seen this reply already.

I am a bit lost at how in Mike's version of the linkTo how the "label" in his XML becomes the "id" 

I think I understand the general premise of what is happening.

  • check for arguments
  • if arguments exists make the map
  • based on arguments open infowindow with data
  • use the arguments to create a link in the infowindow (for direct linking)

Would be grateful for any guidance.

Appreciated.


xelawho

unread,
Sep 19, 2011, 12:28:37 PM9/19/11
to Google Maps JavaScript API v3
> I am a bit lost at how in Mike's version of the linkTo how the "label" in
> his XML becomes the "id"

I'm not sure which example you're talking about, but regardless - you
can assign a variable (in this case id) whatever value you like (in
this case label). The point here is having a unique reference so that
the code will know which marker you are talking about when you say
that you want to open the infowindow on marker x


> I think I understand the general premise of what is happening.
>
> - check for arguments

yep
> - if arguments exists make the map

maybe - depending on the example. the ones that I have seen make the
map regardless and if the arguments exist do something with the marker
(like open an infowindow

> - based on arguments open infowindow with data

yep
> - use the arguments to create a link in the infowindow (for direct
> linking)

sounds about right. It's a fairly simple, logical process if you
follow the flow of it.

I made a couple of demo pages just for the fun(!) of it, with thanks
to Larry and Mike:

http://www.xelawho.com/map/markurl.htm
http://www.xelawho.com/map/markurl2.htm

the first one works fine if there are a set number of markers, but
once you add markers to the list you have to recalculate which url
points to which marker

the second one solves that problem by using the title attribute (which
I guess would be kind of unique) to keep track of which marker is
getting called by the url.

but I had a question here: I use the "tilesloaded" listener to wait
until the markers are on the map before executing the "click" event on
one, but I don't know how the API loads when working with a database -
if the markers are getting made from external data is this good
enough, or is there some other, all-purpose API method to make sure
all the data is in before calling a function? Or does it depend on the
method you're using to get the data in the first place?


hoodsanddrops

unread,
Sep 20, 2011, 6:18:33 AM9/20/11
to Google Maps JavaScript API v3
Thanks for your Examples. Brilliant.

I'm going to have a good read through your code to see if I can get my
head around it a bit better.

I really appreciate the effort.

Thanks

On Sep 19, 5:28 pm, xelawho <xela...@gmail.com> wrote:
> > I am a bit lost at how in Mike's version of the linkTo how the "label" in
> > his XML becomes the "id"
>
> I'm not sure which example you're talking about, but regardless - you
> can assign a variable (in this case id) whatever value you like (in
> this case label). The point here is having a unique reference so that
> the code will know which marker you are talking about when you say
> that you want to open the infowindow on marker x
>
> > I think I understand the general premise of what is happening.
>
> >    - check for arguments
>
> yep
>
> >    - if arguments exists make the map
>
> maybe - depending on the example. the ones that I have seen make the
> map regardless and if the arguments exist do something with the marker
> (like open an infowindow
>
> >    - based on arguments open infowindow with data
>
> yep
>
> >    - use the arguments to create a link in the infowindow (for direct
> >    linking)
>
> sounds about right. It's a fairly simple, logical process if you
> follow the flow of it.
>
> I made a couple of demo pages just for the fun(!) of it, with thanks
> to Larry and Mike:
>
> http://www.xelawho.com/map/markurl.htmhttp://www.xelawho.com/map/markurl2.htm

xelawho

unread,
Sep 20, 2011, 10:11:45 AM9/20/11
to Google Maps JavaScript API v3
> Thanks for your Examples.

you're welcome.

there is a pitfall inherent in that code (and the approach of using
marker names in urls), though:

if your marker name has an apostrophe (or anything else that is not a
"standard" character) the link that you will get will be converted by
the browser to a link that the page cannot read. Click on Jimmy's
Place here and then post that link into your address bar to see what
I'm talking about:
http://www.xelawho.com/map/markurl2.htm

there are two options to avoid this:
1 don't use anything but letters, numbers and spaces in your marker
names
2 if you do use something else, make sure you do a replace (the same
as it does now with spaces and %) before you send the link to the text
box and after the page has received the arguments and is deciding
which marker to click on. Some examples of characters that a browser
(my browsers, anyway) will not change are !-$_&= I guess there are
more, but that should be enough.

hoodsanddrops

unread,
Sep 21, 2011, 5:29:26 AM9/21/11
to Google Maps JavaScript API v3
As I don't use a side bar in my code I'm trying initially just to pass
the title and open the infowindow. and then I'll see about clikcing
the markers instead of the links in the side bar.

I'm using a third party infowindow.js script which allowed me to
customise my infowindows and I think it's causing problems (maybe I
just don't understand properly yet)

Onwards.

hoodsanddrops

unread,
Sep 21, 2011, 7:21:57 AM9/21/11
to Google Maps JavaScript API v3
I think I've had it working all the time I've been writing.
When I entered a URL + the name I wasn't using a % to separate spaces
and was seeing %20 in between words.

All working now.

Very very happy

Thanks :)

hoodsanddrops

unread,
Sep 21, 2011, 9:47:51 AM9/21/11
to Google Maps JavaScript API v3
This has been baffling me today.

http://www.forallitsworth.co.uk/index4.html?Brick%Lane%Bikes

Works almost perfectly except for the fact that the big green close
button is not positioning correctly.
The close button (big green icon) should get it's position from the
marker and then be offset by a specified amount to sit nicely over the
marker.

Does the same thing when you click on a marker for the first time. It
corrects itself if you click a second time on the same marker.

The position of the close button (big green icon) is always at about
50 pixels to the left of where it's supposed to open too.

Any ideas?

hoodsanddrops

unread,
Sep 21, 2011, 10:00:28 AM9/21/11
to Google Maps JavaScript API v3
Fixed.

position: point,

Was being set after the map.
Reply all
Reply to author
Forward
0 new messages