fitBounds does something strange

[THE_AI]

I'm not able to figure out the behavior of fitBounds(). Right now I
have around 70 markers that I'm displaying on the map, but the map is
for my understanding not zoomed and positioned properly. The map is
not taking the whole possible, screen, but it rather shrinks and is
nearly positioned out of the viewable area.

Here are few screenshots:
http://compojoom.com/images/maps/map_markers.PNG
- this one shows where the map is positioned on the screen, although
there is so much available space.

http://compojoom.com/images/maps/map_markers1.PNG
- this one shows how small the map actually is

http://compojoom.com/images/maps/map_markers2.PNG
- and this one shows how the markers in other categories are shown -
this is actually what I want to achieve.

Here is the function that I use to zoom to my markers:

zoomToMarkers: function(markers, useOnlyVisible) {
var markers = markers || this.markers, useOnlyVisible =
useOnlyVisible || true;
markers = useOnlyVisible ? markers.filter(function(marker) { return
marker.getVisible(); }) : markers;
if (markers.length > 0) {
var bounds = [markers[0].getPosition(),
markers[0].getPosition()].toLatLngBounds();
markers.each(function(marker) {
bounds.extend(marker.getPosition());
});
this.fitBounds(bounds);
}
}

in case you wonder what toLatLngBounds() does:
Array.implement({

toLatLng: function() {
if (this.length == 2 && typeOf(this[0]) === 'number' &&
typeOf(this[1]) === 'number' ) {
return new google.maps.LatLng(this[0], this[1]);
}

for (var i = 0, l = this.length; i < l; i++) {
if (typeOf(this[i]) === 'array') {
this[i] = this[i].toLatLng();
}
}

return this;
},

toLatLngBounds: function() {
if (this.length === 2) {
if (typeOf(this[0]) === 'array') {
this[0] = this[0].toLatLng();
}
if (typeOf(this[1]) === 'array') {
this[1] = this[1].toLatLng();
}
return new google.maps.LatLngBounds(this[0], this[1]);
}
return this;
}
}

[geoco...@gmail.com]

On Jun 11, 6:14 am, THE_AI <danielsd...@yahoo.fr> wrote:
> I'm not able to figure out the behavior of fitBounds(). Right now I
> have around 70 markers that I'm displaying on the map, but the map is
> for my understanding not zoomed and positioned properly. The map is
> not taking the whole possible, screen, but it rather shrinks and is
> nearly positioned out of the viewable area.
>
> Here are few screenshots:http://compojoom.com/images/maps/map_markers.PNG
> - this one shows where the map is positioned on the screen, although
> there is so much available space.
>
> http://compojoom.com/images/maps/map_markers1.PNG
> - this one shows how small the map actually is
>
> http://compojoom.com/images/maps/map_markers2.PNG
> - and this one shows how the markers in other categories are shown -
> this is actually what I want to achieve.
>
> Here is the function that I use to zoom to my markers:
>
> zoomToMarkers: function(markers, useOnlyVisible) {

Please read and follow the posting guidelines if you want help:
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e

(can you run a debugger on a screen shot?)

-- Larry

[Rossko]

> Here are few screenshots:http://compojoom.com/images/maps/map_markers.PNG

Looks remarkbly like this map did
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/5d70e7a01e94ca2a/867b56fbae09fbc8
Looks like bad coordinates, one of the markers being north of the
north pole or somesuch.

[THE_AI]

@Larry, sorry for not posting a link to a live example (I needed to
update the db first). Here it is:
http://labs.compojoom.com/index.php/hotspots

@Rossko, well I remember that happened after I randomly entered
hotspots in the db. SO perhaps I've placed a hotspot on the north
pole, but to be honest I don't understand why this should influence
the map. At the end I'm getting the coordinates of all hotspots on the
map and I'm forming the bounds...

This strange behavior is also to be observed on the send map and print
map functions(top right buttons).

On Jun 11, 6:25 pm, Rossko <ros...@culzean.clara.co.uk> wrote:
> > Here are few screenshots:http://compojoom.com/images/maps/map_markers.PNG
>

> Looks remarkbly like this map didhttp://groups.google.com/group/google-maps-js-api-v3/browse_thread/th...

[Rossko]

> http://labs.compojoom.com/index.php/hotspots

You're still giving strings in Hotspots.parseHotspots
var position = new google.maps.LatLng(hotspot.latitude,
hotspot.longitude);

You've got more than one data item like this
id=111 latitude=123.000000 longitude=12.340000
This is not on planet earth, and whether you understand why or not,
the API struggles to place such imaginary points on the standard maps
of Earth.

You don't seem to be listening to advice

[Barry Hunter]

{"id":"115",
"latitude":"121.000000",
"longitude":"123.000000",
"title":"My title",

That's an impossible location...

> --
> 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 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.
>
>

[THE_AI]

Thank you for the help guys!
I guess that I'll have to create some checks in place so that
something like this won't happen in the future.

@Rossko - please excuse me, if it seemed that I'm not listening to
your advises, as that is not the case. I was just not aware that I
have entered coordinates that are not on the planet earth. :)

On Jun 11, 8:53 pm, Barry Hunter <barrybhun...@gmail.com> wrote:
>   {"id":"115",
>      "latitude":"121.000000",
>      "longitude":"123.000000",
>      "title":"My title",
>
> That's an impossible location...
>

[THE_AI]

It is me again.
I removed the points with impossible coordinates. Now each marker on
the map is really located on the earth.

As you can see: http://labs.compojoom.com/index.php/hotspots#!1 when
the map loads everything seems fine.
If you click on the first category icon(a big i) a toolbar on the
right with all hotspots will open, the markers are loaded again and
this time fitBounds centers the map so that a 150px grey line is
visible.

After I open the toolbar on the right I'm triggering the resize event
on the map.

Am I again doing something wrong here?
Thank you in advance for all the help and suggestions :)

[Rossko]

> As you can see:http://labs.compojoom.com/index.php/hotspots#!1when
> the map loads everything seems fine.
> If you click on the first category icon(a big i) a toolbar on the
> right with all hotspots will open, the markers are loaded again and
> this time fitBounds centers the map so that a 150px grey line is
> visible.

It zooms and centres the map to fit all the markers in. It's done
just that.
Because you've made the map canvas smaller, it has to zoom out one
more level to fit the bounds in. At the wider zoom you get see more
of the parts that aren't mapped, e.g. close to the poles and the
imaginary 'beyond' - your grey area.

I don't see any fault, it is doing what you tell it to.

[THE_AI]

Well, the thing is - if you zoom one level in - you still have all the
markers on the map.(or is the api adding some 100px on left and right
to make sure that the markers are really there? actually that cannot
be, because if you click on the airplane icon you will see that 2
markers are actually not to be seen (the are left behind the status
bar on the right))

And also - if the map was showing the same grey space above and below
the map I wouldn't get that strange feeling that something is wrong.
Imagine that a user looks at that page and sees this grey area - what
is he going to think? But if the grey area is below and above the map,
then he would think - all right it is just centered.

Cheers,
Daniel

[Rossko]

> Well, the thing is - if you zoom one level in - you still have all the
> markers on the map.

Aha, I don't see that at all - I can't see the odd "i" marker in China
when zoom in one. I expect it all looks rather different depending on
screensize??

>(or is the api adding some 100px on left and right
> to make sure that the markers are really there?

It's not clear. I don't think it does any padding as such, but it
does do as described in the docs - it sees that the new view
_contains_ bounds. To illustrate - - get the bounds of the current
view, fitBounds on that and the map will zoom out to contain it inside
the new view, and won't stay at the exact same view. But I wonder if
fitBounds is smart enough to avoid on-map controls as well, and works
to place the bounds in an uncluttered map area.

> actually that cannot
> be, because if you click on the airplane icon you will see that 2
> markers are actually not to be seen (the are left behind the status
> bar on the right))

I think that's a timing race in your code, much happens
asynchronously. I can't unravel your code, with so much Mootools &
Hotspots extra scripting with tabs and slidebars, but I'm guessing it
takes time to add the sidebar and then trigger the map resize. While
that's happening the marker data is being fetched AJAX fashion, and
when that is available the fitBounds is performed.
Which will finish first? I think for the bigger "i" markers file the
AJAX takers longer, and things happen in the 'correct' order.
But for the smaller "airplane" data, the fitBounds happens before the
resize. The subsequent resize does not change the maps location/zoom,
nor is it intended to, so the bounds may no longer fit the new smaller
map.

You'll need to enforce a chain of events in sequence I think.

> And also - if the map was showing the same grey space above and below
> the map I wouldn't get that strange feeling that something is wrong.

Is there any reason to expect that the centre of your marker-bounds is
exactly on the equator? The API is doing what you ask of it.
If you want different behaviour, you can make it so. For instance
after doing a fit to bounds, you can write code that checks if the
zoom level is zero and forces a recentre about the equator so that it
looks nice. Or perhaps more 'correct', examine the north and south
limits in view, and if outside the known map (+/-85 latitude ish),
reposition. Or you could examine the bounds yourself, avoid using
fitBounds altogether as the results displease, and calculate yourself
what to do with it.
The API is flexible.