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
Related
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.
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);
I've been searching for this quite a bit and cannot seem to find it anywhere online.
The background story: I am making a .NET windows forms C# application and I have a couple of listbox items that I want to have the following functionality:
When I click on the listbox item I want the map to go to that location with a pin attached to these longitude and latitude coordinates.Also I would like a certain zoom. I would be very thankful is someone could give some information if this is possible.
It would be great if there would exist functions that do this.
Also I want to add a new function to add a new location, that when I add a pin to the map I get the longitude and latitude coordinates back somehow.
I understand events and all that btw, I just don't know how to use any possible functions, that google maps provides for .NET framework.
Google maps API is browser API (javascript) as #Mr. J pointed out.
There are third party API's that can be used
https://github.com/ericnewton76/gmaps-api-net
GoogleSigned.AssignAllServices(new GoogleSigned(gmapsApiKey));
var map = new StaticMapRequest();
map.Center = new Location("1600 Amphitheatre Parkway Mountain View, CA 94043");
map.Size = new System.Drawing.Size(imgGoogleResult.Width, imgGoogleResult.Height);
map.Zoom = 14;
map.Sensor = false;
Uri imgURI = map.ToUri();
imgGoogleResult.ImageLocation = imgURI.AbsoluteUri;
i have a problem that i want to zoom to place using esri javascript api
i have this class from esriGetStarted javascript
function zoomToPlace(lon, lat, scale) {
mapDeferred.centerAndZoom([lon, lat], scale);
}
i have tried to zoom to place using this html element :
zoom to place
but it never work untill now, please help me how to zoom to place, or may be is there alternative.
You may be having spatial reference issues (first port of call for any error with a mapping engine :) ). My code from an existing project converts the coordinates to web mercator before attempting to zoom to it:
var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(lon, lat));
_map.centerAndZoom(pt, scale);
Not sure if this will help, but there is a Locate Widget in the ESRI API:
require(["esri/dijit/LocateButton"],
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
Preface
I'm using the newly released Microsoft Virtual Earth SDK v6.2 which has built-in support for pushpin clustering. I realize there are custom ways of doing clustering where my question is easy to answer, but I'd like to leverage the built-in support as much as possible, so this question is specifically related to using the clustering feature of the VE 6.2 SDK.
The Problem
After enabling the built-in clustering (via VEShapeLayer.SetClusteringConfiguration), the clusters are created as expected, however, they have the default information in them which says something like "X items located here - zoom in to see details". In the app I'm working on, I need to display more information than that - I either need to allow the user to click on the pushpin and VE will automatically zoom in so that the points are now distinct OR display the names of the points in the infobox attached to the cluster pushpin. The catch is that cluster shape that VE creates for me does not appear to be editable until after all of the clustering logic has run...at that point, I don't know what original pushpins belong to that particular cluster. Is there a way to make this happen without resorting to creating a custom clustering implementation?
In case others have this same issue, the answer was just posted over in the MSDN forum for VE:
http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/d55090e2-2f5c-459c-9ecd-c3f32f0505b3/
We're doing precicely what I think you are asking for... Try this
// Create your map
var MapCtl = new VEMap('MapContainer');
// Create a layer for your pins
MapPinLayer = new VEShapeLayer();
// Add a callback that gets called every time the cluster config changes
var clusteringOptions = new VEClusteringOptions();
clusteringOptions.Callback = clusterCallback;
MapPinLayer.SetClusteringConfiguration(VEClusteringType.Grid, clusteringOptions);
// your cluster callback method
function clusterCallback(clusters) {
for (var i = 0; i < clusters.length; ++i) {
var cluster = clusters[i];
var clusterShape = cluster.GetClusterShape();
var clusterSize = cluster.Shapes.length;
clusterShape.SetTitle('Some Title');
clusterShape.SetDescription('There's ' + clusterSize + ' shops in this area');
}
}