Google Maps v3 with Openlayers - First Zoom Level - javascript

I use Google Maps v3 in my application and I noticed a strange behavior, When I refresh the web page, the map zoomed out to display the whole map then get back to the zoom level I specify in my code. This happen fast but every time I refresh the page. How can I fix it?

We once had this problem in our app but I just checked and it isn't happening any more. I can't remember what I did to fix it but here are some things to consider or try:
Set the maxExtent of your map to be the same as your base (Google) layer.
When we set up our google layer we set spherical mercator to true.
Check that your map's projection is "EPSG:900913", but this may have no effect.
// get max extent from base layer and set in map
map.maxExtent = map.getMaxExtent();
// create a Google layer
layer.params.sphericalMercator = true;
layer.params.maxExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
var googleLayer = new OpenLayers.Layer.GoogleWfdss(layer.id, layer.params);
These might seem obvious but I thought I'd give you some other directions for debugging if you hadn't considered them.

Related

BingMaps Is it possible to disable clustering below certain zoom level?

My map pushpins are relatively close to each other and even on a big zoom I still see them clustered.
I solved this issue by spreading the clustered pushpins by some random distance 5-10 meters.
I need more accurate solution so my idea is to disable the clustering below the certain zoom level, but I didn't find any way how to do it.
There is no option to disable clustering in the clustering layer in Bing Maps, but what you can do is monitor the zoom level of the map, and when it gets to a certain point, hide the cluster layer and load a new layer that isn't clustered. Unfortunately this means having two copies of your data in memory.
If you haven't fully committed to using the Bing Maps platform, you may also want to take a look at Azure Maps. The Azure Maps web SDK does things a bit differently where you would keep your data in a single data source and attach rendering layers to it. Clustering is turned on in the data source and has a max zoom level option for clustering.
Here is some examples: https://azuremapscodesamples.azurewebsites.net/index.html?search=cluster
Here is documentation: https://learn.microsoft.com/en-us/azure/azure-maps/clustering-point-data-web-sdk
There is an option clusteringEnabled now on ClusterLayerOptions which will disable clustering without losing the whole layer.
eg:
Microsoft.Maps.Events.addHandler(this.map, 'viewchangeend', () => {
// de-cluster at highest zoom level
this.clusterLayer?.setOptions({
clusteringEnabled:
this.map.getZoom() < this.map.getZoomRange().max
});
});

HERE Maps - Can you view traffic from further zoom?

I am currently working with HERE Maps API and I currently have a traffic toggle up and working. The problem I am having is that when I toggle on the traffic layer using this method it seems to not render. I have to zoom in quite a bit on the map to actually see the traffic layer get rendered in. Is this how it is designed or is there a way to view traffic from a further zoom level?
With H.ui.ZoomControl.Options, default zoom level while rendering for a map can be changed. If you think that you really need to zoom a lot after the traffic layer gets loaded, you can optimise using that. After that, can set zoom_min and max value to further check the traffic details in the map.
Please refer following link to further check for zoomcontrol options >
https://developer.here.com/documentation/maps/3.1.14.0/api_reference/H.ui.ZoomControl.html

Google Maps Javascript API new renderer (v3.32) infowindow displayed under controls

With the Google Maps JS API new renderer, as of v3.32, infowindows placement seems wrong. They are not panned outside of map controls areas. The best example is directly from Google Maps Platform docs. If you go here and click on the marker you'll see what I'm talking about: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
See bottom of question for printscreen.
I searched a lot for some information on this change of behavior, if that's by design now, in case we'd have to handle this in code, but can't seem to find anything regarding this. What would be the API way to deal with this ?
Looks like it's partly been fixed in the weekly channel (current = 3.34). So you can load your map with https://maps.googleapis.com/maps/api/js?v=3.34&key=...
and the infowindow should move out of the map control's areas. It seems though it will not pan out of custom controls areas, which it used to do before the new renderer.

Google maps API V3 fitBounds() not working

I'm want to call fitBounds() on a google map so that a user can see their own location relative to a selected marker/location.
Here is my function which handles this:
var fitMapToShowResult = function(index){
var hereLatLng = new google.maps.LatLng (lat,lng); //location of the user defined outside this func
var firstResultLatLng = new google.maps.LatLng(
$scope.searchResults[index].geometry.location.k,
$scope.searchResults[0].geometry.location.B
);
var latlngList = new Array( hereLatLng, firstResultLatLng ); // latlng: an array of instances of GLatLng
var latlngbounds = new google.maps.LatLngBounds();
for (var i=0;i<latlngList.length;i++){
latlngbounds.extend(latlngList[i]);
console.log('latlngbounds',latlngbounds);
}
//$scope.map.setCenter(latlngbounds.getCenter());
$scope.map.fitBounds(latlngbounds);
};
It works perfectly about 80% of the time. But roughly 1 in 5 times the marker is completely out of view and the zoom is way too high for the two points to ever be visible at the same time. What am I doing wrong?
It may be relevant that my map uses custom markers.
To assist with debugging, I added this code to draw the bounds on the map...
rect = new google.maps.Rectangle( {bounds: latlngbounds, map: $scope.map} );
It always looks perfect for the first couple results:
But often it's incorrect:
Notice that in each of the cases where it's incorrect, it appears that one of the dimensions of the rectangle (height/width) is correct, but the other is not. My gut tells me this is relevant.
Roundup of similar questions
I know this is a popular question, but I've reviewed all of the others and my issue does not seem to be a duplicate of any of them. Hopefully this stockpile will be useful to future troubleshooters, but none of these solved my issue.
google maps V3 fitBounds not accurate
Useless question with no code and no answers
Google Maps API v3 - fitBounds centers only one marker
User was re-defining the inside a loop without realizing it.
Using setZoom() after using fitBounds() with Google Maps API V3 &
Google Maps API V3 fitbounds() zooms out but never in &
Google Maps with fitBounds don't zoom
fitBounds() happens asyncronously so downstream actions need to be wrapped in eventListener.
google maps → fitBounds manually
User was passing incorrect type parameters to LatLngBounds (should be two google.maps.LatLngs)
google maps fitBounds() is broken or..? & Google maps API V3 method fitBounds()
Was constructing the google.maps.LatLngBounds with buggy coordinates (instead of leaving it empty and using .extend())
Trying to get Google Maps fitbounds to work
Super noob did not realize javascript methods were case sensitive
Google maps V3 custom marker images and fitBounds()
fitBounds() works as expected but user needed to allow more space for bug custom markers
Google Maps V3 fitBounds on visible markers
Simple question about how to use fitBounds()... rtfm
Google Maps API V3 - fitBounds randomly works but occasionally ignores bounds and loads in the middle of the ocean
No answers at time of writing. Sounds like invalid lat/lng pairs.
Don't use the values as geometry.location.**k**, it depends on minimized file (with some tool like MinifyJS) then it'll changes when google release a new versión.
MrUpsidown was right. My bounding box was wrong because I was referencing ....geometry.location.k directly instead of the LatLng object. Refactoring the code accordingly corrected the problem.

Zoom map out to contain the given map bounds

I have a google map app and the user is able to perform a marker search.
The search has the current mapBounds so that I can search only in the current view. However, if I don't have any results in the current view - I'm trying to do a search within 100km of the center of the map.
If I find location within 100km I want to zoom out the map in order to show the locations I've found.
On the server I go through all my locations and get the sw and ne points. So basically in my ajax response I can directly create latLngBounds (no need to loop through the markers locations and extend the bounds).
The issue is whenever I try to do map.fitBounds(mynewbounds); nothing happens. The map stays as it is.
It seems that since the center of the map is the center of the new bounds, the map doesn't want to move. If I do map.pantobounds then the map moves to the northwest corner of the bounds.
The behavior of pantoBounds is expected according to the documentation:
https://developers.google.com/maps/documentation/javascript/reference
If the bounds is larger than the map, the map will be shifted to include the northwest corner of the bounds
Any ideas how to make the map zoom out in order to contain the new bounds?
Okay, I just figured out what is going on. Right before I set the boundaries I was trying to remove my zoom_out and dragend events. Unfortunately I opted in for using the clearListeners event, which was removing all events set on the map (even the one that are not set by me). So it seems that fitBounds issues are zoom_changed event, but the map was not responding to it, as all listeners were removed.
Once I removed the correct events by using removeListener(listenerInstance) the fitBounds function started to behave as expected.
So just as a warning to everyone else! Don't use clearListeners if you don't know what you are doing. It removes all events assigned to the map object which can lead to nasty behavior!

Categories