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.

Google Maps Javascript API view location

I'm using Google Maps Javascript Web API. I'm looking to get the current location (GPS coordinates) of the view. Meaning, if I drag the map all the way to England, the function would return the GPS coordinates of the view's center (which would be somewhere in England).
How can it be accomplished? Is there a certain function I can use?

Try getCenter():
let map = new google.maps.Map(document.getElementById('map'), { ... }),
currentLocation = map.getCenter();
Demo

Google maps API issue, center on specific position on NativeScript App

I am trying to make an uber type app with nativescript but I am struggling to find a way to center a position when an app opens just like when you open uber app. I am using google maps API
Thank you

If you're using the nativescript-google-maps-sdk (which I think you are since you also posted the question over there) then you can do this:
// Any value from 2 to 20
mapView.zoom = 15;
// Moves the map
mapView.latitude = lat;
mapView.longitude = lng;
// Places the marker at the point
marker.position = mapsModule.Position.positionFromLatLng(lat, lng);

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

Switch from Terrain layer to Satellite layer using Mapbox

I'm using Mapbox for a dynamic map on a social website.
I added a satellite toggle button but I can't find any way in the API docs on how to switch from terrain view to satellite view like Google Maps does?
Is it hidden somewhere? I know I have to subscribe and I will but I need to know I can switch from terrain to satellite in realtime without losing my markers, etc.
Let's say I have a simple map:
var initialLocation = [40.97, 64.07];
var initialZoomLevel = 2;
var map = L.mapbox.map('map_container').setView(initialLocation, initialZoomLevel);
How could I switch from terrain to satellite?
Any suggestions?
Thanks!

Its pretty easy to add a satellite view - just not very well documented. A prerequisite though is you must have a paid account (UPDATE: you used to need a paid account - that no longer seems to be the case) and have setup your own map in your account over there with the satellite imagery selected.
var initialLocation = [40.97, 64.07];
var initialZoomLevel = 2;
var map = L.mapbox.map('map_container').setView(initialLocation, initialZoomLevel);
L.control.layers({
"Street": map.tileLayer,
"Satellite": L.mapbox.tileLayer("my satellite imagery map id")
}, null).addTo(map);
This adds a control in the upper right (by default) that allows you to select between the default map and your satellite map.

With MapBox there is no concept of "modes", just different maps each with their own Map ID. So create a map at http://tiles.mapbox.com/newmap based on terrain, then another based on satellite imagery. Switch between them with the second argument to L.mapbox.map (see http://www.mapbox.com/mapbox.js/api/#L.mapbox.map) using their respective IDs.