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.
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 use Bing maps API in ionic v1 framework app which builds on android,iOS and windows platforms.
I am facing problem in Bing maps which is plotting properly but zoom in,zoom out,changing the map type from aerial to road & fetching current location these buttons are not functional.I have proper API key to access maps. I even tried it doing ionic serve on browser but nothing helped me.
I have followed code from the below link:
https://github.com/eppineda/ionic.bing-map-demo
I have also changed JS src file of bing maps in index.html page from:
src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'
To
src='http://www.bing.com/api/maps/mapcontrol'
The src file i have changed referring to Microsoft document pages as below:
http://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#loadMapAsync+HTML
Issue can be seen in the link -
http://plnkr.co/edit/NO5eLxogOyPHsiXzzpaQ?p=preview
$scope.init = function () {
console.log('Map init');
var mapOptions = {
credentials: '',
mapTypeId: Microsoft.Maps.MapTypeId.road,
center: new Microsoft.Maps.Location(51.5033640, -0.1276250),
zoom: 15,
// showLocateMeButton: false,
// // NavigationBarMode: "default",
// // NavigationBarOrientation: "vertical",
// showZoomButtons: false,
// ShowNavigationBar: false
showDashboard: true
// // showMapTypeSelector : true
// // showMapTypeSelector: false
// navigationBarMode: Microsoft.Maps.NavigationBarMode.compact
};
map = new Microsoft.Maps.Map(document.getElementById('divMap'), mapOptions);
console.log(map);
};
Please help me out to figure this out.It would be really helpful with the solution. Thanks in advance.
I suspect there is one of two issues. The first is that you have some other HTML element above the map and/or navigation bar/buttons. This would block you from being able to press those buttons. The second is that your code is actually loading the map twice somehow and as such you are ending with two maps on top of each other. When this happens the navigation bar for the bottom map ends up on top and using it actually changes the bottom hidden map. I've seen this occur once before in someone else's app who load the map twice to the same div.
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
I am new to leaflet but have developed some interactive maps in the past. I started working on displaying a gps device on a UAV. The UAV sends the location information on a server and has a php code that returns some sensor values upon relevant request (in geojson format, so I dont have to do much... phew). I was looking for some solutions for how to do it seamlessly using Ajax when i came across leaflet_Ajax.. I had a lot of issues which were mostly resolved by some questions on stackoverflow for example this one and a few others.
Now here is how i am writing my code for the markers for the points:
var geojsonLayer = new L.GeoJSON.AJAX("myserver/get_geoj.php?stype=particle&sval[min]=2&sval[max]=26",{pointToLayer: redmarkers, onEachFeature: popUp});
function popUp(feature, layer) {
layer.bindPopup(feature.properties.sensor_v);
},
I have another function redmarkers that returns red colored circle markers. What happens is that finally it is loading the data from the server... phewh.... but it does not bind the popup or the markers to this layer. It looks for the (I guess some) default marker images in the js/images/marker-icon.png as marker symbol. This doesnot exist and so it gives me an error. But if i take any random image and call it marker-icon.png and put it in the desired location it shows that image on the map but still does not bind the popup.
What am i doing wrong. As i am new to stack overflow as well if you need more information or if i am not asking the question right please let me know.
Okay So I resolved it, but thought that somebody else might do similar mistakes later and I should answer this question.
I had accidentally edited my leaflet.js file somehow. I dont remember doing that though. I deleted the dummy image that I had put in the js/images folder for marker-icon.png and it was still showing the same marker. The i realized it had cached it so i disabled chache, only to realize in the console that the error had something to do with leaflet.js. I updated the version of leaflet.js (had a backup copy on my disk, so the same version didnt update or something), and it works fine now. Here is my current code
var geojsonLayer = new L.GeoJSON.AJAX(dataurl,{
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, redRegionStyle);
},
onEachFeature: onfeature
});
function onfeature(feature, layer)
{
layer.on(
{
mouseover: highlightFeature,
mouseout: resetHighlight
});
layer.bindPopup(feature.properties.sensor_v.toString());
}
It works perfectly highlights the features as i like and also has the popup bind to the features.
Sorry to all those who i bothered by asking this question as it was my own sily mistake
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 !