Google maps API V3 fitBounds() not working - javascript

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.

Related

How to add user images on markers in google maps?

I'm building an angular app in which I require user profile images to be shown on google map as markers.
The location comes from an API as JSON with Lat, long and images of user.
Plus, I'm using clustering in maps. Whenever I click the cluster, the markers with images should appear.
I'm trying it both AGM maps library as well as Google Maps Javascript API
Is there a way to do it?
To use custom markers and use your own images. You simply have to pass the url of your image to the an icon property of the Marker object as below...
var marker = new google.maps.Marker({
position: point,
icon: 'http://contoso.com/image.png',
map: map
});
if you need more control over that image and how it is rendered. Google Maps API provides and icon object specification you can use
var icon = {
url: 'http:contoso.com/image.png',
anchor: new google.maps.Point(0, 0)
}
There are a lot of documentation and examples in Google Maps APIs website
If you don't want to use google maps default marker and want to add custom HTML to markers,
Check this plugin out - https://github.com/googlemaps/js-rich-marker
Really easy plugin to use HTML as google maps markers.
Note - Basically this plugin uses custom overlay as markers. So, compared with default google maps markers, I think using this makes the map becomes a bit heavy to pan around when there are many markers (especially on smartphone)

Google Maps v3 with Openlayers - First Zoom Level

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.

google map limited area not working

Google Maps v3 - limit viewable area and zoom level
Problem was solved at above link. But I don't use google.maps.Map in my project.
var map = new google.maps.Map(document.getElementById("map_canvas"));
I used GMap2.
var map = new GMap2(document.getElementById("map_canvas"));
But this version not working. Any help?
The first place to look at for implementation help on the Google Maps API v2 should always be Mike William's v2 tutorial.
This page Part 7 Restricting the range of map zooms and pans. should apply.
Remember that v2 is deprecated and will potentially stop working 5/19/2013.

GoogleMaps: How to add marker without zooming out.

I have a list of people that I need to map. Some of them have geocoded addresses and others don't. So, I map the ones that I have, and then I geocode the ones that I don't have geocodes for, and I add them to the map one at a time. (side note: the google geocoder api has a limiter that allows you geocode 10 addresses the first second that you hit it, and then 1 per second every second after that). So, I as I am geocoding these addresses, I am creating Markers and adding them to the map. The problem here is that I can't effectively interact with the map from the UI while the other addresses are being geocoded, because each time I call marker.setMap(mymap) it re-zooms out to fit all markers. So, I can't interact with the map until they are all mapped. Is there any way to add a marker to the map without re-zooming out?
Geocoding and creating a marker doesn't automatically shift the center of the map. If you copied from the Maps API sample code, you may see a line like
map.setCenter(results[0].geometry.location);
That's causing the results to the center of the map. Comment out that line and see if there's still a problem.If you don't see setCenter, then look for a line with fitBounds() and comment that out. If you're still having trouble, post a live version of your code, or put it up on jsFiddle or something so we can debug it.

How to achieve Bing maps like InfoWindow in Google Maps?

I'm using Google Maps v3.
I really like the InfoWindows found in Bing, as opposed to Google.
Screenshots & functionality found here comparing the two:
http://www.axismaps.com/blog/2009/07/data-probing-and-info-window-design-on-web-based-maps/
Question: How can I replicate Bing like InfoWindows while using Google Maps v3?
UPDATE: To be more specific, what I like about Bing's InfoWindows include:
- The pointer dynamically changes sides from left/right/bottom/top, as opposed to Google limited to only have the InfoWindow pointer on the bottom
- Bing's InfoWindows use less space
- You can configure Bing's InfoWindows to pop up outside of the map bounders so that you don't have to autopan the map to display the marker's InfoWindow
Check out google-maps-utility-library-v3. Specifically, look at InfoBox. It allows you to style the infobox however you want, although you have to do the styling on your own. I don't think you'll be able to have the infobox display outside the map viewport, but you can turn off autopan.

Categories