Rather than trying to customise the Google provided controls, just
create your own ones.

http://code.google.com/apis/maps/documentation/javascript/controls.html#CustomControls

A control to change the map type or change zoom level should be pretty
simple to code.


On 27 September 2010 16:20, jimmyt1988 <[email protected]> wrote:
> Ok, I've had a play with this and using jquery i've got this going:
>
> function customiseLargeMapControl(){
>    $('#map_canvas img').each(
>        function(){
>                if($(this).attr("src").indexOf("mapcontrols3d6.png")!
> ==-1){
>                    $(this).attr({
>                        src: root + "/images/
> custom_mapcontrols3d5.png"
>                    });
>                    done = true;
>                }
>        }
>    );
>    $('#map_canvas div').each(
>        function(){
>                if($(this).css("background-
> image").indexOf("mapcontrols3d6.png")!==-1){
>                    $(this).css("background-image", "url(" + root + "/
> images/custom_mapcontrols3d5.png)");
>                    done2 = true;
>                }
>        }
>    );
> }
>
>
> Thing is, It just feels like Google would have covered this, complete
> customisation kind of thing.
>
> I want to be changing the size of everything and where buttons are
> located and I also want to unify all of the google map tools into one
> control interface on the side of my screen. So rather than having
> SATELLITE and HYBRID at the top, I want to make a samrt icon that goes
> near the controls that does the same job, for example a camera as the
> SATELLITE one.
>
> Any other directions?
>
> On Sep 27, 12:19 pm, Martin <[email protected]> wrote:
>> I've done this myself on a couple of maps, this is the technique:
>>
>> function customiseLargeMapControl(){
>>  var  count=6,  updateFn=function(){
>>   var  mapCtn=document.getElementById('mapCtn');
>>   if( mapCtn){
>>    var  images= mapCtn.getElementsByTagName('img'), i= images.length;
>>    while(i--){
>>     if( images[i].src.indexOf('mapcontrols3d5.png')!==-1){
>>       images[i].src='images/custom_mapcontrols3d5.png';
>>       count=0;
>>     }
>>    }
>>   }
>>    count--;
>>   if( count>0){
>>    setTimeout( updateFn, 2000);
>>   }
>>  };
>>  setTimeout( updateFn, 2000);
>>
>> };
>>
>> Once the map has loaded i call that function, it checks every 2
>> seconds to see if the Google PNG for the controls has loaded.
>> If it finds the PNG then it replaces it with my modified version of
>> the same PNG (just changes in colors to match the map).
>>
>> The function will try up to 6 times to replace the Google PNG, if
>> after 12 seconds it can't find the PNG then it gives up.
>>
>> Martin.
>>
>> On 27 Sep, 11:36, jimmyt1988 <[email protected]> wrote:
>>
>> > I'm struggling to understand how to customise the Google controls so
>> > that I can create my own personal look and feel for them.
>>
>> > I want to change the png file that is used and use mine instead.
>>
>> > Any hints?
>
> --
> You received this message because you are subscribed to the Google Groups 
> "Google Maps JavaScript API v3" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to 
> [email protected].
> For more options, visit this group at 
> http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Reply via email to