Google Maps v3 fitBounds inconsistent zoom - javascript

having a very strange problem.
A: One method of my map works fine. User sets start point and end point and map is created and the fitBounds.extend(bounds) sets zoom level appropriately to encompass the start/end markers on the map.
B: The second method is if the user sets a start point but not and end point, but based on other user interests I get retrieve and end point for them and plot it on the map using the same functions as method A. However, upon fitBounds.extend(bounds) it sets the zoom level way out at 4 (country level). Then I have to force set the zoom.
It doesn't matter when at any point the user does method A (before or after method B)...when its method A, the zoom level is correct. When its method B its always to zoom level 4.
...but all using the same functions.
Both methods accurately put the markers on the map and accurately draw the route between the markers. Just on method A, the auto zoom is correct and on method B the zoom is always set to 4.
If user does A, its right...then B happens, its zooms out...does B again it stays zoomed out...does A again it goes back to proper zoom.
Driving me nuts here!
My map object is "setMap", it is a global var
function setMapBounds(start,end) {
mapBounds = new google.maps.LatLngBounds();
mapBounds.extend(start.position);
mapBounds.extend(end.position) ;
setMap.fitBounds(mapBounds) ;
}
function addMarkers(newMarkers) { // an array of map points.
var tempMarkers = [] ;
for (var x=0;x<newMarkers.length;x++) {
var tempLatlon = new google.maps.LatLng(newMarkers[x].lat,newMarkers[x].lon) ;
var tempMarker = createMarker(tempLatlon,newMarkers[x].img,newMarkers[x].title) ;
tempMarkers.push(tempMarker) ;
}
return tempMarkers ;
}
function createMarker(latlon,img,title) {
var marker = new google.maps.Marker({
map:setMap,
position:latlon,
icon: img,
title:title
}) ;
return marker ;
}
// This is Method A - it ALWAYS sets the zoom properly
function setDropoff(dropoffLoc) { //called from: index.js/setPickup(), tab-map.html
geoCoder.geocode({'address': dropoffLoc}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
endLocation = dropoffLoc ;
endLat = results[0].geometry.location.lat() ;
endLon = results[0].geometry.location.lng() ;
// first clear any existing END Markers only.
while(markersArray.length) {
markersArray.pop().setMap(null);
}
endPointSet = 1 ;
endLatlon = new google.maps.LatLng(endLat,endLon) ;
var endMarker = createMarker(endLatlon,'img/red-pin.png','Drop off') ;
markersArray.push(endMarker) ;
setMapBounds(userMarker,endMarker) ;
if (startPointSet == 1) {
drawRoute("DRIVING",startLocation,endLocation) ;
}
}
} else {
error = "Address not found."
}
});
}
// This is method B, it ALWAYS pushees the zoom out to 4. It is pulled out of another function that tests to see if the user manually set and end point...if so, then add wayPoints between user set start/end points. If not, then set map to user start point to a single end point of interest
if (endPointSet == 1) { // draw Pickup to START to wayPoints to END
var markers = [
{lat:interests[0].shub_lat,lon:interests[0].shub_lon,img:interests[0].img,title:"Pickup"},
{lat:interests[1].ehub_lat,lon:interests[1].ehub_lon,img:interests[1].img,title:"Dropoff"}
] ;
var points = [interests.shub_address,interests.ehub_address] ;
extraMarkers = addMarkers(markers) ;
drawRoute("BICYCLING",startLocation,endLocation,points) ;
} else {
var markers = [
{lat:interests[0].shub_lat,lon:interests[0].shub_lon,img:interests[0].img,title:"Dropoff"}
] ;
extraMarkers = addMarkers(markers) ;
setMapBounds(userMarker,extraMarkers[0]) ;
drawRoute("WALKING",startLocation,interests[0].shub_address) ;
}
}
Here is are the objects passed into setMapBounds from the else within Method B. Start point is set by User...but no end point is set, I am picking one for them. The first Object is start, the second object is end.
Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 563, gm_bindings_: Object…}
Lf: Object
...
position: pf
D: -82.49799999999999
k: 27.873196
...
Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 602, gm_bindings_: Object…}
Lf: Object
...
position: pf
D: -82.47631678090198
k: 27.9374560148825
...
And here are the objects passed into setMapBounds from Method A where the user is setting both the same start and end points. you can see the start point is the same for both Method A and B.
Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 563, gm_bindings_: Object…}
Lf: Object
...
position: pf
D: -82.49799999999999
k: 27.873196
...
Lh {__gm: Object, gm_accessors_: Object, map: Qk, closure_uid_909815000: 703, gm_bindings_: Object…}
Lf: Object
...
position: pf
D: -82.45717760000002
k: 27.950575
...

I am making a similar application, and the code that I am using is:
var start;
var end;
function updateMap(name, obj){ //obj is a form input i.e. <input type="text">
var marker = (name==='start')?start:end;
geocoder.geocode({address:obj.value}, function(results, status){
//get coords/check if is valid place
if(status === google.maps.GeocoderStatus.OK){
//get info, store in new marker
marker.setPosition(results[0].geometry.location);
marker.setTitle(obj.value);
//if both markers present
if(start.getPosition() && end.getPosition()){
map.fitBounds(new google.maps.LatLngBounds(start.getPosition(), end.getPosition()));
}else{
//otherwise, if one marker
map.setCenter(marker.getPosition());
map.setZoom(15);
}
marker.setMap(map);
}else if(status === google.maps.GeocoderStatus.ZERO_RESULTS){
alert('There is an issue with address. Please refer to the "Help" link.');
}else{
setTimeout(function(){
updateMap(marker, obj);
}, 200);
}
});
}
What this does is take an argument from a text input, geocode it, and place a marker on the map. The function is triggered by an onchange event on the form element. This can be easily adapted for your own usage. If there was only one point, I just settled for a default zoom value (usually pretty close to the street, though you can adjust this however you want).
As for your question of why it is not working, I can formulate a better guess with the entire code. For now, I would think it has something to do with region-biasing, or that it is simply a bug. It is probably just best to work around it.

Related

Google Maps API: radarSeach with map bounds returning results outside

I have the following code:
google.maps.event.addListener(map, 'idle', function() {
var request = {
bounds: map.getBounds(),
keyword: selected_provider //some value
};
service.radarSearch(request, function(results, status) {
for (var i = 0; i < results.length; i++) {
var marker = new google.maps.Marker({
position: results[i].geometry.location,
map: map
});
});
});
});
in some cases, results' array has some locations that which markers are printed outside the map bounds.
map.getBounds() return this:
oh {Da: mh, va: hh}
Da: A: -23.53883129305287 j: -23.53223111409202
va: A: -46.6811610542145 j: -46.686782964309714
A certain result:
A: -23.536062
F: -46.68732699999998
So, F (the longitude) is not inside the longitudes from southWest and NorthEast.
Anyone have ever seen this?
As explained here
https://code.google.com/p/gmaps-api-issues/issues/detail?id=8340
"Bounds used to bias results when searching for Places (optional). Both location and radius will be ignored if bounds is set. Results will not be restricted to those inside these bounds; but, results inside it will rank higher."
It doesn't make any sense for me to perform a search with bounds as parameters and the response comes with results outside the bounds. The only thing I think I can do is iterate the results array before showing them, and check if each item is inside bounds.

Google Maps - get values from location array based on the map's current viewpoint

Edit:
Question = "is there a way to loop through the array and check if each location (long/lat) falls within the current viewport directly" (failing that get all markers within the viewport)
Background:
I have an array of locations (lat, long, id).
I want to:
On a Google Map, use the location array to display markers.
The user can scroll/zoom the map.
Have a button underneath the map, so when the user has decided on an area, he can click the button, and the code will return the ids (from the location array) that are contained within the viewport / map bounds.
There is a .contains for Google, so I guess you could potentially use that with something like
map.getBounds().contains and somehow reference each marker.getPosition()
but I wonder if there's a way to loop through the array and check if each location (long/lat) falls within the current viewport directly
You mean something like this (not tested), map is the google.maps.Map object and needs to be in scope. markersArray is the array of markers.
for (var i=0; i< markersArray.length; i++) {
if (map.getBounds().contains(markersArray[i].getPosition())) {
// the marker is in view
} else {
// the marker is not in view
}
}
http://jsfiddle.net/UA2g2/1/
Thanks geocodezip, you gave me the idea on how to solve it via looping through the array. I don't know if this is the most efficient way, but I put together some code that seems to do what I want - if you check the jsfiddle above and view console you can see that it logs when and which points are in the viewport.
$(document).ready(function(){
var myOptions = {
center: new google.maps.LatLng(51, -2),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var storeArray = new Array(["51.38254", "-2.362804", "ID1"], ["51.235249", "-2.297804","ID2"], ["51.086126", "-2.910767","ID3"]);
google.maps.event.addListener(map, 'idle', function() {
for (i = 0; i < storeArray.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(storeArray[i][0], storeArray[i][1]),
map: map
});
}
for (var i=0; i<storeArray.length; i++) {
if (map.getBounds().contains(new google.maps.LatLng(storeArray[i][0], storeArray[i][1]))) {
console.log("marker: " + storeArray[i][2]);
}
}
});
});

Google Maps V3 drag Marker and update PolyLine

I'm trying to develop an application where the user draws around a property, it adds a marker and a poly line so they can clearly see what's happening. But I want to add the ability to drag the Marker (this is easy) and update the PolyLine's position (this is not so easy?)
Here is some of my code
This is the function that draws my poly lines.
the variable 'll' is an instance of google.maps.LatLng
// Shorter namespace
var _g = google.maps;
// Shorten the namespace, it's used
// a lot in this function
var s = SunMaps;
// If we've reached the max number
// of lines then exit early.
if (s.LINES >= 4) {
return;
}
// The defaults
var options = {
"strokeColor" : "green",
"strokeOpacity" : 1.0,
"strokeWeight" : 4
};
// If we don't have an instance of poly
// create one.
if (s.POLY == false) {
s.POLY = new _g.Polyline(options);
s.PATH = s.POLY.getPath();
}
// Push the new coords into the path object
s.PATH.push(ll);
// Set the map for the poly
s.POLY.setMap(s.instance);
// Add a marker
new s.Marker(ll);
// Increase the counter
s.LINES++;
Draws the markers at the same point (the s.Marker function used in the line code)
the variable 'll' is an instance of google.maps.LatLng
var _g = google.maps;
// Our custom marker
var marker = new _g.Marker({
"position" : ll,
"icon" : {
"path" : _g.SymbolPath.CIRCLE,
"scale": 10
},
"draggable": true,
"map" : SunMaps.instance,
"LineIndex": SunMaps.LINES
});
_g.event.addListener(marker, 'drag', function (e) {
console.log(marker.getPosition());
// Here is where I can't workout or find documentation
// on how to move the line.
});
The path property of the Polyline object is an MVCArray. See https://developers.google.com/maps/documentation/javascript/reference#MVCArray
So, to move the last point you should be able to do:
s.PATH.setAt(s.PATH.getLength() - 1, marker.getPosition());
Okay, So I figured it out. Using #Dave's method
Here is the code that updates the polyLine as you drag the marker
var _g = google.maps;
var _s = SunMaps;
// Our custom marker
var marker = new _g.Marker({
"position" : ll,
"icon" : {
"path" : _g.SymbolPath.CIRCLE,
"scale": 7
},
"draggable": true,
"map" : _s.instance,
// This is the last known index of a polyLine
"lineIndex": _s.LINES
});
// Listen to the drag event
_g.event.addListener(marker, 'drag', function (e) {
// Set the new position of the marker as it drags
this.setPosition(e.latLng);
// Update the path
_s.PATH.setAt(this.lineIndex, this.getPosition());
});

Setting a Google Maps viewport to automatically fit pane for locations of (n) markers of various locations

The approach I took thus far has been:
function addMarker( query ) {
var geocoder = new google.maps.Geocoder();
var afterGeocode = $.Deferred();
// Geocode 'query' which is the address of a location.
geocoder.geocode(
{ address: query },
function( results, status ){
if( status === 'OK' ){
afterGeocode.resolve( results ); // Activate deferred.
}
}
);
afterGeocode.then( function( results ){
var mOptions = {
position: results[0].geometry.location,
map: map
}
// Create and drop in marker.
var marker = new google.maps.Marker( mOptions );
marker.setAnimation( google.maps.Animation.DROP );
var current_bounds = map.getBounds(); // Get current bounds of map
// use the extend() function of the latlngbounds object
// to incorporate the location of the marker
var new_bounds = current_bounds.extend( results[0].geometry.location );
map.fitBounds( new_bounds ); // fit the map to those bounds
});
}
The problem I'm running into is that the map inexplicably zooms out by some amount, no matter if the new marker fits within the current viewport or not.
What am I doing wrong?
ADDENDUM
I added logs and an additional variable to capture the map bounds after the transition was made (new_new_bounds)
current_bounds = // Map bounds before anything is done.
{-112.39575760000002, 33.60691883366427},
{-112.39295444655761, 33.639099}
new_bounds = // From after the extend
{-112.39295444655761, 33.60691883366427},
{-112.39575760000002, 33.639099}
new_new_bounds = // From after the fitbounds
{-112.33942438265382, 33.588697452015374},
{-112.44928766390382, 33.657309727063996}
OK, so after much wrangling, it turns out that the problem was a map's bounds are not the same as a map's bounds after fitBounds(). What happens (I presume), is Google takes the bounds you give it in the fitBounds() method, and then pads them. Every time you send the current bounds to fitBounds(), You're not going to fit bounds(x,y), you're going to fit bounds(x+m,y+m) where m = the arbitrary margin.
That said, the best approach was this:
var current_bounds = map.getBounds();
var marker_pos = marker.getPosition();
if( !current_bounds.contains( marker_pos ) ){
var new_bounds = current_bounds.extend( marker_pos );
map.fitBounds( new_bounds );
}
So, the map will only fit bounds if a marker placed falls outside the current map bounds. Hope this helps anyone else who hits this problem.
A possible explanation is that you randomly placed your new marker into the gap of the z-curve. A z-curve recursivley subdivide the map into 4 smaller tiles but that's also the reason why there are gaps between the tiles. A better way would be to use a hilbert curve or a moore curve for map applications. There is a patented search algorithm covering this issue, I think it is called multidimensional range query in quadtrees. You want to look for Nick's hilbert curce quadtree spatial index blog.

Openlayers - arrary of info into popupmarker

I have a connection to a database(db). I am getting the lon, lat and name from the db and stroing them:
while ($row_ChartRS = mysql_fetch_array($sql1))
{
$latitude=$row_ChartRS['latitude'];
$longitude=$row_ChartRS['longitude'];
$bus_name =$row_ChartRS['short_name'];
//echo $latitude.'--'.$longitude.'<br>';
echo $bus_name;
I then create a map to display the data. The markers are working fine for all lat, lon locations. Code:
function init()
{
projLonLat = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
projMercator = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator
overviewMap = new OpenLayers.Control.OverviewMap();
//adding scale ruler
scale = new OpenLayers.Control.ScaleLine();
scale.geodesic = true; // get the scale projection right, at least on small
map = new OpenLayers.Map('demoMap',
{ controls: [ new OpenLayers.Control.Navigation(), // direct panning via mouse drag
new OpenLayers.Control.Attribution(), // attribution text
new OpenLayers.Control.MousePosition(), // where am i?
new OpenLayers.Control.LayerSwitcher(), // switch between layers
new OpenLayers.Control.PanZoomBar(), // larger navigation control
scale,
overviewMap // overview map
]
}
);
map.addLayer(new OpenLayers.Layer.OSM.Mapnik("Mapnik"));
map.addLayer(new OpenLayers.Layer.OSM.Osmarender("Osmarender"));
//Create an explicit OverviewMap object and maximize its size after adding it to the map so that it shows
//as activated by default.
overviewMap.maximizeControl();
//Adding a marker
markers = new OpenLayers.Layer.Markers("Vehicles");
map.addLayer(markers);
vectorLayer = new OpenLayers.Layer.Vector('Routes');
map.addLayer(vectorLayer);
for (k in Locations)
{
//adding a popup for the marker
var feature = new OpenLayers.Feature(markers, new OpenLayers.LonLat(Locations[k].lon, Locations[k].lat).transform(projLonLat,projMercator));
//true to close the box
feature.closeBox = true;
feature.popupClass = new OpenLayers.Class(OpenLayers.Popup.AnchoredBubble,
{
//create the size of the box
'autoSize': true,
'maxSize': new OpenLayers.Size(100,100)
});
//add info into box
for (z in names)
{
feature.data.popup = new OpenLayers.Feature(new OpenLayers.LonLat(names[z]).transform(projLonLat,projMercator));
}
//puts a scroll button on box to scroll down to txt
//feature.data.overflow = "auto";
marker = feature.createMarker();
marker.display(true);
markerClick = function (evt) {
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
markers.addMarker(marker);
map.setCenter(new OpenLayers.LonLat(Locations[k].lon, Locations[k].lat).transform(projLonLat,projMercator), zoom);
var lonLat1 = new OpenLayers.LonLat(Locations[k].lon,Locations[k].lat).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
var pos2=new OpenLayers.Geometry.Point(lonLat1.lon,lonLat1.lat);
points1.push(pos2);
//Uncomment to put boxes in when map opens
//feature.popup = feature.createPopup(feature.closeBox);
//map.addPopup(feature.popup);
//feature.popup.show()
}
var lineString = new OpenLayers.Geometry.LineString(points1);
var lineFeature = new OpenLayers.Feature.Vector(lineString,'',style_green);
vectorLayer.addFeatures([lineFeature]);
map.setCenter(lonLat1,zoom);
} //function
However the name in the popup marker is the same for all markers. i.e. the last name pulled from the db. Can anyone please help with this - I have spent 3 full days trying to fix it!
Thanks in advance!
A few comments:
The PHP code you’ve posted is completely irrelevant, since it’s not seen to be used anywhere.
The objects names and Locations aren’t declared anywhere in the code you posted. What do they contain?
In the code quoted below, you’re creating multiple new Feature objects, but you assign them all to the same property (thereby overwriting that property each time). Is that intentional?
//add info into box
for (z in names) {
feature.data.popup = new OpenLayers.Feature(new OpenLayers.LonLat(names[z]).transform(projLonLat,projMercator));
}
Edit:
This does appear to be where it’s going wrong. You should remove the for...z loop, and replace it with the following code:
//add info into box
feature.data.popup = new OpenLayers.Feature(new OpenLayers.LonLat(names[k]).transform(projLonLat,projMercator));
Since in PHP, you’re using the same index ($v) to fill both arrays, it makes sense to use the same index to read them in javascript...
Aside from that, using the for...in loop on Javascript arrays is not considered good practice, for a number of reasons. It’s better to use the following:
for (k = 0; k < Locations.length; k += 1) {
// your code
}
i had the same problem , and i solve it ...
the problem is overwrite
you don't have to loop inside your function , do the loop for function for example:
function init(z)
{
feature.data.popup = new OpenLayers.Feature(new OpenLayers.LonLat(names[z]).transform(projLonLat,projMercator));
}
for (z in names)
{
init(z)
}

Categories

Resources