Repositioning map controlers

[Jeremy]

I really like my map controllers, such as the zoom and street view, to be in the default top right hand corner of the map, but I also want to put an image there.

I know I can use statements like: zoomControlOptions:{position:google.maps.ControlPosition.XXXXX} to move the controls to different corners, but I want to keep it in the LEFT_TOP, just x-pixels down.

Previously I was using a jQuery statement that ran on an interval when the map initialization script, but this was just broken in some recent changes made to the map API. I was hoping for a more compliment fix that I wouldn't have to worry about monitoring to see if it still works.

function adjustToolbars(){if($("div.gmnoprint").length > 0){

$("div.gmnoprint").each(function(){

var index_current = parseInt($(this).css("zIndex"), 10);

if(index_current == 10){

$(this).css("margin-top", "60px");

window.clearInterval(interval);}});}}

[Chris Broadfoot]

Hi Jeremy,

The recommended way to place your image in these positions is to have them as Custom Controls. This should give you the freedom to place your image in the top right hand corner.

For example, put the image in TOP_RIGHT, and the zoom control in RIGHT_TOP.

Chris

--

http://twitter.com/broady

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/GLAkSchbH7cJ.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Jeremy]

Thank you, that sounds exactly like what I need, but how would I position an image in the custom controls?

Am I skipping over it in the API documentation?

[Chris Broadfoot]

Hi Jeremy,

Have a look here:

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

A "control" is really just a DOM element, like an image.

--

http://twitter.com/broady

On Tue, Aug 30, 2011 at 1:27 PM, Jeremy <jer...@pinkgeo.com> wrote:

Thank you, that sounds exactly like what I need, but how would I position an image in the custom controls?

Am I skipping over it in the API documentation?

--

You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/BUAoLnF5_gYJ.

[Jeremy]

Hmmmm, that looks great but I'm running into a small snag.

Code A places the image at the immediate right of the other controls:

var file = document.createElement("DIV");

file.innerHTML = "<img src='image.png'>";

map.controls[google.maps.ControlPosition.TOP_LEFT].push(file);

Code B places the image at the bottom of the other controls:

var file = document.createElement("DIV");

file.innerHTML = "<img src='image.png'>";

map.controls[google.maps.ControlPosition.LEFT_TOP].push(file);

[Martin™]

You can add CSS styles to your cutom control, for example:

file.style.marginTop='5px';

Is that what you need?

Martin.

[Jeremy]

No styling was working for me, but my problem was array order, but I have it fixed now.

I had assumed incorrectly that the controls were in the LEFT_TOP or TOP_LEFT positions, but they are not. I needed to explicitly position these elements into the LEFT_TOP first, and then push my image file into the TOP_Left:

map = new google.maps.Map(document.getElementById("map"), {streetViewControlOptions:{position:google.maps.ControlPosition.LEFT_TOP}, zoomControlOptions:{position:google.maps.ControlPosition.LEFT_TOP}, ...});

var file = document.createElement("DIV");

file.innerHTML = "<div id=\"logo\" style=\"width:70px;height:45px;margin:5px;-webkit-user-select:none\"><img src=\"/logo.png\" /></div>";

map.controls[google.maps.ControlPosition.TOP_LEFT].push(file);

It works great now, and I'm very happy that its done the proper way, as opposed to the hack I made before. Thank you everyone for your help and support. Now I'm off to push a couple more elements into the map the proper way. Thanks.