Develop Reference

Issue with Google Maps API v3 map.fitbounds(bounds) setting map zoom incorrectly

I'm using Google Maps API v3 to display walking routes using data extracted from GPX files uploaded to my website.
The page consists of two Google Maps objects, the first displays all the routes available and a second one will show the route as a polyline inside a Bootstrap 4 modal.
I've managed to get the GPX points plotted and displayed and each point extends a bound object.
However, when I call the fitbounds() method it will usually work the first time and correctly set the zoom and center, any subsequent calls to the same route or a different route will set the zoom completely wrong. Quite often the SW corner being in the ocean just off Mexico and the NE corner somewhere in Northern Russia when all the routes are based in the UK.
mapData.RoutePins contains a JSON object of latitude and longitude coordinates.
var routemap = new google.maps.Map(document.getElementById('route'), mapOptions);
var routebounds = new google.maps.LatLngBounds();
mapData.RoutePins.forEach(function (RoutePin) {
polylinedata.push({ lat: RoutePin.Latitude, lng: RoutePin.Longitude });
routebounds.extend({ lat: RoutePin.Latitude, lng: RoutePin.Longitude });
});
routemap.fitBounds(routebounds);
polyline = new google.maps.Polyline({
path: polylinedata,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: routemap
});
To try and find the issue I added a bounds_changed event handler which logs the raw bounds object and NE/SW corners of the bound object to the console.
google.maps.event.addListener(routemap, 'bounds_changed', function (event) {
console.log(routemap.getBounds() + "\nNE: " + routebounds.getNorthEast() + "\nSW: " + routebounds.getSouthWest());
});
The expected result is a correctly zoomed and centered viewport of the route I've plotted, what I'm actually getting based on the console log is interesting though.
Map Initialized:
getBounds(): ((0, 0), (0, 0))
NE: (-1, -180)
SW: (1, 180)
After fitbounds():
getBounds(): ((15.190468336327566, -97.72890624999991), (74.04118207833291, 96.68515625000009))
NE: (53.7738, -0.44322999999997137)
SW: (53.71267, -0.6005199999999604)
The getBounds coordinates represent what is actually shown but the NE and SW coordinates are what should be displayed.
What is going wrong?

Having spent some time rebuilding and tweaking the page, I think I've found the issue which is slightly obvious once I realised.
In order to try and avoid screen flash as the modal dialog fades open I've been trying to run all the Google Maps updates before triggering the modal.
However, while the modal is closed it has its display element set to none which effectively means the div size is 0, so the map gets rendered and scaled to a viewport of 0 pixels.
For reference a previous version of my code used a fixed map zoom level but this was slightly hit and miss as to how good the map looked.
My fix is to run the Google Maps code when the modal is fully displayed using $('#routeModal').on('shown.bs.modal', function (event) { rather than $('#routeModal').on('show.bs.modal', function (event) {
The show event triggers immediately but the shown event waits until all css transitions have completed. I end up with a slight screen flash as the elements update, noticeably with the previous map still showing briefly but it works.
I still need to build the new version back into the site properly but I thought I'd feedback my findings so far.

Cannot load multiple photospheres using google maps streetview API

I'm trying to load custom photospheres inside of map pin descriptions using the google maps streetview api.
It loads correctly the first time, but when I attempt to open either the same map pin or another, (which sets the panoimg variable and recalls initPano()), I get a blank image. And in the console, a failed 400 error to the URL https://geo0.ggpht.com/cbk?cb_client=apiv3&panoid=custom&output=tile&x=0&y=0&zoom=0&nbt&fover=2
I've got an my code here on JSfiddle
https://jsfiddle.net/falldeaf/9ej8x2xj/1/
(JSfiddle stripped down further to NOTHING except the problem described)
I"m trying to call this function each time a map pin is opened:
function initPano() {
var panoOptions = {
pano: 'custom',
visible: true,
panoProvider: getCustomPanorama
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano-canvas'), panoOptions);
}
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
console.log(panoimg);
return "https://www.tcpalmextras.com/tcpalm_hosted/images/brandyhallmap/" + panoimg;
}
You can see the error occur by clicking the map pin on the screen, then closing the popup, then opening it again. This second and all subsequent openings don't properly load the photosphere.

If you're creating the custom photospheres inside of modal windows, do NOT add visible:true option present in the examples to the new google.maps.StreetViewPanorama object's options.
Removing that line allows them to open an indefinite number of times.

Microsoft.Maps.AutosuggestManager not returning bestView in Bing Maps V8?

I'm migrating an application from Bing Maps V7 to V8 and I'm having an issue with the AutoSuggest. What I had been doing is when a user makes a selection in the AutoSuggest then the map would center on the location using the bestView attribute returned in the suggestion result and add a pushpin. This worked in V7.
The pushpin does get added correctly in V8 but the map is not being centred. When I checked in the debugger the suggestion result was missing the bestView attribute. When I go the documentation for the SuggestionResult Object bestView is an attribute that should be returned
The link I'm using for Bing Maps is https://www.bing.com/api/maps/mapcontrol?callback=loadMap
The code I'm using is
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: bingMapCredentials,
showDashboard: false
});
Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
var options = {
maxResults: 4,
map: map
};
var manager = new Microsoft.Maps.AutosuggestManager(options);
manager.attachAutosuggest('#txtSearch', '#searchBoxContainer', selectedSuggestion);
});
function selectedSuggestion(suggestionResult) {
map.setView({ bounds: suggestionResult.bestView });
newAddPinToMap(suggestionResult.formattedSuggestion, suggestionResult.location);
}
Is there a way to get the bestView attribute for suggestionResult? Is this a bug that will be fixed soon or should I be looking for a different value?

Google Maps API (3) computeDistanceBetween returns NaN

We're using Google Maps API to show a list of all our clinics on our website and I'm in the process of writing a 'Show all clinics near me' feature. Everything is working fine and I have a circle being drawn on the map using the Google Maps Circle call from the geometry library.
We want to return a list of all clinics that fall within that circle. Our clinics are loaded via a $.get(); call from a separate .js file. I've been messing with the google.maps.geometry.spherical.computeDistanceBetween(pointA, pointB); function to test if each clinic falls within the circle, where pointB is the center of the circle and pointA is the position of the clinic- both of which are being defined via new google.maps.LatLng(clinic.lat, clinic.long));.
ComputeDistanceBetween keeps returning NaN for every clinic. Due to some sensitivity issues I cannot share the exact code I'm working with but I modified a Google Maps API fiddle for marker clustering HERE because we're also using marker clustering and the lat/longs load similarly to ours.
I already checked this post and it didn't work out for me.

You have a typo in your code. locations[x].long doesn't exist, that should be be locations[x].lng
so your function should be:
var mylocation = new google.maps.LatLng(locations[0].lat, locations[0].lng);
console.log(mylocation);
var marker_lat_lng = new google.maps.LatLng(locations[2].lat, locations[2].lng);
console.log(marker_lat_lng);
var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(mylocation, marker_lat_lng);
document.getElementById('feedback').innerHTML = distance_from_location;
proof of concept fiddle

Bing maps api works on pc but not mobile web app

I really hope someone can help with my problem. I have built a mobile web app http://ufa-ld-qa.azurewebsites.net/ (the QA site) with asp.net mvc4 using Bing Maps API for various functionality in the app. I am having problems with the directions module. When I view the site on my pc (Chrome and IE) it works fine and I see no errors but on mobile devices it is not working (but it did work fine yesterday when we launched to QA). I have used HTML5 geolocation (this may be the issue) to get user's location to allow them to get directions to a location. I will post my code below and if anyone could please help me it would be greatly appreciated. We have tested it on about 7 different mobile devices with different OS's and it doesn't work on any. Does anyone know if this is a Bing issue or my code below? Thanks so much in advance.
<script type="text/javascript">
var map = null;
var directionsManager = null;
var userLat = null;
var userLong = null;
var userPosition = null;
var latlng = new Microsoft.Maps.Location(#Model.latitude, #Model.longitude);
navigator.geolocation.getCurrentPosition(locationHandler);
function locationHandler(position)
{
userPosition = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude);
}
function GetMap() {
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "Au_7giL-8dUbFkJ8zLjcQKy4dV2ftPfpMxQ0_sVBksoj4Y-1nBT00Z1oqUIU894_",
mapTypeId: Microsoft.Maps.MapTypeId.road});
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', { callback: directionsModuleLoaded });
}
function directionsModuleLoaded() {
// Initialize the DirectionsManager
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Create start and end waypoints
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ location: userPosition });
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ location: latlng });
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
// Set request options
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
// Set the render options
directionsManager.setRenderOptions({
itineraryContainer: document.getElementById('directionPanel'),
displayWalkingWarning: false,
walkingPolylineOptions: { strokeColor: new Microsoft.Maps.Color(200, 0, 255, 0) },
});
// Specify a handler for when an error occurs
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', displayError);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
}
function displayError(e) {
// Display the error message
alert(e.message);
}
</script>

A couple of things to try. First ensure that your app is allowed to access the users location. Most mobile platforms require you to mark that the app requires access to the GPS in the manifest. Another thing to look into is the possibility that the userLocation isn't populated before your callback for the directions manager is called. It's possible that the GPS takes a little longer on the mobile device to find the users location and as such the directions loaded function is firing before the users location is set, thus passing in a null starting . You might find it useful to have a flag to indicate that the directions manager has loaded and a simple function that runs after setting the flag and also runs after setting the use location that checks that both the directions manager has loaded and the user location has been set and then calls your directions loaded function.

My Windows Phone 8 App is experiencing similar behavior. (Nokia 920)
http://bing.com/maps/default.aspx?cp=47.677797~-122.122013&lvl=12
When the Website preference is set to 'desktop version' the map renders correctly.
When the Website preference is set to 'mobile version' the map renders incorrectly.
Just started happening about a week ago !