Creating custom styles for Navigation

[Amir]

Hi there,

I want to totally change all the button styles on the page (like
navigation style, or map type buttons (hybrid, satellite, ...) style).

It's about 2 hours that I'm searching about this but so far I haven't
found anything.

I've found this one http://code.google.com/apis/maps/documentation/controls.html#Custom_Controls
but it's for API version 2 and i can not use it in version 3.

so, any idea.

cheers,

[Amir]

I uploaded the file so you can have a better idea:
gmap.jpg

[String]

On Jul 14, 10:37 am, Amir <amirrezaa.farh...@gmail.com> wrote:

> I want to totally change all the button styles on the page (like
> navigation style, or map type buttons (hybrid, satellite, ...) style).

This feature isn't supported yet by v3. I'd suggest you file an
enhancement request:
http://code.google.com/p/gmaps-api-issues/issues/entry?template=Maps%20API%20v3%20-%20Feature%20Request

In the meanwhile, your best way forward is probably to put your
controls in a div placed over the map, and implement the functionality
(zoom, pan, etc) yourself in the various click events.

Or, stick with v2 for your app - is there a reason you need to use v3?

String

[Bjornie]

I'm working on custom navigation as well, but haven't come up with
something beautiful yet ( ;) ). However, I have managed to create a
custom navigator window (working in at least Firefox and Opera,
haven't had time to try them in any other browser). What I do is I
create a separate layer (div) and place it over the map, then placing
regular DOM objects (like images) in the div, and associate events to
these objects. I'm putting a screenshot among the images on the groups
front page.

I can give you a code snippet, and if you don't get it - ask me and I
will try to guide you more. As I'm using mootools for a bunch of
functionality on my site, my example below will be full of mootools
code. Hopefully you sort it out anyway.

var map = new google.maps.Map(document.getElementById
('YourGoogleMap'), {
zoom: 7,
position: YOUR_POSITION,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var controllers = new Element('div', {
'style': 'background-image: url(/path/to/background-image.png);
width: 500px; height: 35px; position: absolute; left: 0; top: 0; z-
index: 1001';
});
var zoomIn = new Element('img', {
'src': '/path/to/zoom-in-image.png',
'style': 'cursor: pointer'
});
var zoomOut = new Element('img', {
'src': '/path/to/zoom-out-image.png',
'style': 'cursor: pointer'
});

/* Above is probably the same as the following, new Element(...) is
mootools specific:
*
* var controllers = document.createElement('div');
* controllers.style.backgroundImage = 'url(...)';
* controllers.style.width = '500px';
* ...
*/

zoomIn.addEvent('click', function() {
map.set_zoom(map.get_zoom() + 1);
});
zoomOut.addEvent('click', function() {
map.set_zoom(map.get_zoom() - 1);
});
/* Above is probably the same as the following, if you're not using
mootools (addEvent is mootools specific):
*
* google.maps.event.addDomListener(zoomIn, 'click', function() {
* map.set_zoom(map.get_zoom() + 1);
* });
* ...
*/

zoomIn.inject(controllers);
zoomOut.inject(controllers);
controllers.inject(document.getElementById('YourGoogleMap'));
/* Above is probably the same as the following, since element.inject
() is mootools specific:
*
* controllers.appendChild(zoomIn);
* controllers.appendChild(zoomOut);
* document.getElementById('YourGoogleMap').appendChild(controllers);
*/

[Bjornie]

It's kind of hard to read code in these groups, so I put it on pastbin
as well: http://pastebin.com/m2d953e55

[Amir]

oom, cool, I'll try to use overlay div(s). BTW there isn't any reason
for using V 3.0, I just wanted to use the recent version.

On Jul 14, 4:36 pm, String <sterling.ud...@googlemail.com> wrote:
> On Jul 14, 10:37 am, Amir <amirrezaa.farh...@gmail.com> wrote:
>
> > I want to totally change all the button styles on the page (like
> > navigation style, or map type buttons (hybrid, satellite, ...) style).
>
> This feature isn't supported yet by v3. I'd suggest you file an

> enhancement request:http://code.google.com/p/gmaps-api-issues/issues/entry?template=Maps%...

[Amir]

Fantastic, lemme go through it and try this myself and if I face any
issues I'll ask you.
Thanks for this.

[Bjornie]

Ok, now I think I've got a pretty nice way to do this. I've created a
library for the custom navigation system, and it's pretty easy to use
now (of course it can always get better). I've uploaded the library
(custom-controllers-library.js) to the group files, along with a demo.
Everything is in the custom-controllers.zip archive.

This is how it can look (codewise that is ;)) : http://pastebin.com/f6c8def11

Anyone is free to use, change, improve or refuse these classes.

Link to the zip-file;
http://google-maps-js-api-v3.googlegroups.com/web/custom-controllers.zip

[Amir]

WOW, Bjornie, this is brilliant

I uploaded the file (gmap.zip), I changed some css's and I'm almost
created the thing that I was looking for (thanking you), but just I
can't figure out the PAN button. would you help me with this also.

Cheers,

[Amir]

aa, another thing, the slider is an image at the moment, I'll put a
real slider for that, in case anyone wants to use this file.

[Esa]

This reminds me of the times when Google Maps API was released at the
end of June 2005. An incredible new scifi-like possibility to create
totally new things that were not even imagined the day before.

The most noisy crowd was shouting that the default marker is ugly.

[Amir]

Hi Bjornie

can you gimme some hints about the function for pan?

On Jul 14, 11:15 pm, Bjornie <bjorn.wikst...@gmail.com> wrote:

[Bjornie]

ATM I don't have time to look into it, but hopefully later today or
maybe tomorrow. I'm occupied this weekend as well. Maybe I'm going to
implement the same functionality in my app (at work) - if I do, I will
post my findings here.

[Amir]

Cool, keep me posted.